• html 绑定


      html 绑定


     

    目的

    html绑定到DOM元素上,使得该元素显示的HTML值为你绑定的参数。如果在你的view model里声明HTML标记并且render的话,那非常有用。

     

    例子

    <div data-bind="html: details"></div> 

    <script type="text/javascript">
    var viewModel = {
    details: ko.observable() // Initially blank
    };

    viewModel.details("<em>For further details, view the report <a href='report.html'>here</a>.</em>");
    // HTML content appears
    </script>

     

    参数

        主参数

        KO设置该参数值到元素的innerHTML属性上,元素之前的内容将被覆盖。

        如果参数是监控属性observable的,那元素的内容将根据参数值的变化而更新,如果不是,那元素的内容将只设置一次并且以后不在更新。

        如果你传的是不是数字或者字符串(例如一个对象或者数组),那显示的文本将是yourParameter.toString()的等价内容。

        其它参数

            无

     

    注:关于HTML encoding

    因为该绑定设置元素的innerHTML,你应该注意不要使用不安全的HTML代码,因为有可能引起脚本注入攻击。如果你不确信是否安全(比如显示用户输入的内容),那你应该使用text绑定,因为这个绑定只是设置元素的text 值innerText和textContent。

     

    依赖性

    除KO核心类库外,无依赖。

    这个绑定的功能与text binding相对应,不同点为:

    • 控制DOM元素的innerHtml属性
    • 不会对内容进行Html编码,你可以定义自己的html标签注入进去

    <script src ="js/knockout.js"></script>
    <script src = "js/jquery-1.10.2"></script>

    <div data-bind="html: details"></div>
    <div data-bind="text: details"></div>


    <script type="text/javascript">
    var viewModel = {
    details: ko.observable()
    // Initially blank
    };
    viewModel.details("<em>For further details, view the report <a href='report.html'>here</a>.</em>");
    window.setInterval(function()
    {
    viewModel.details("<p style='color:red'>" + "now Time is " + new Date().getTime() + "</p>") ;
    },1000);
    // HTML content appears
    ko.applyBindings(viewModel);
    </script>

    执行结果

    now Time is 1439809372167

    <p style='color:red'>now Time is 1439809372167</p>
  • 相关阅读:
    遍历Map集合的方法
    简易循环手动增加表的数据
    初识Mysql,mysql的介绍和一些SQL语句
    SQL语句
    STS中applicationContext.xml配置文件
    STS中poem.xml配置文件
    MybatisMapper 动态映射(增删改查)
    MybatisMapper 映射框架(增删改查 原始模式)
    Spring 框架下 (增 删 改 )基本操作
    Spring 框架下 事务的配置(复杂)
  • 原文地址:https://www.cnblogs.com/jinling/p/4737440.html
Copyright © 2020-2023  润新知