zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    flutter 右滑返回上一页
    flutter 的Animation简单了解
    Flutter Offstage、Visibility隐藏/可见
    flutter手势
    Flutter生命周期
    flutter 路由动画
    flutter 保持页面状态
    flutter 不规则底部工具栏实现
    flutter 主页面底部导航栏实现以及主题风格设置
    flutter DropdownButton使用
  • 原文地址:https://www.cnblogs.com/jinling/p/4737440.html
Copyright © 2011-2022 走看看