zoukankan      html  css  js  c++  java
  • Knockout 新版应用开发教程之"text"绑定

    目的

    DOM元素显示文本的值是你传递的参数,前提是text先绑定到该元素上

    典型的常用元素 <span>或者<em>习惯性的用来显示文本,但是在技术上来说你可以用任何元素的。

    例子:

    Today's message is: <span data-bind="text: myMessage"></span>
     
    <script type="text/javascript">
        var viewModel = {
            myMessage: ko.observable() // Initially blank
        };
        viewModel.myMessage("Hello, world!"); // Text appears
    </script>
    

    参数

    • 主要参数
      • Knockout 会把参数值设置到元素文本节点上,节点上任何存在的内容将会被覆盖重写
      • 这个参数是一个监控属性值,任何时候在值被改变的时候它绑定元素text将会触发更新,假如不是一个监控属性,它仅仅就是text,不会更新
      • 假如你提供一些非数字或者字符串(举例来说,你对象或者数组,那显示的文本将是yourParameter.toString()的等价内容。
    • 附加参数

    注1:使用函数或者表达式来决定text值

    如果你想要以编程方式决定text的取值,一个选择是去创建一个 computed observable 依赖属性,并且你在它的执行函数里编码,决定应该显示什么样的text文本。

    例如:

    The item is <span data-bind="text: priceRating"></span> today.
     
    <script type="text/javascript">
        var viewModel = {
            price: ko.observable(24.95)
        };
        viewModel.priceRating = ko.computed(function() {
            return this.price() > 50 ? "expensive" : "affordable";
        }, viewModel);
    </script>
    

    如上,现在你的text将会在“expensive” 和“affordable”选择,每当price改变的时候.

    也许,你只是想做一些简单的操作,你不需要是创建一个依赖监控属性。你能通过任意的javascript表达式去绑定text,

    例如:

    The item is <span data-bind="text: price() > 50 ? 'expensive' : 'affordable'"></span> today.
    

    同样的结果,但我们不需要再声明priceRating依赖监控属性

    注2:关于HTML编码

    因为这个绑定,设置你的文本值使用一个文本节点,所以它是安全的如果设置任何的字符串的值,没有HTML或者脚本注入的风险

    例如,如果你这样写:

    viewModel.myMessage("<i>Hello, world!</i>");
    

    这个斜体的文本将不会渲染出来,而是原样输出标签。如果你需要显示HTML内容,请参考html绑定.

    注3:不能在一个容器元素中用“text”

    有时,你想要用KO设置一text,但是text绑定不能包含一个额外的元素

    例如,在一个option节点中,你不允包含其他的元素,所以下面将不会工作。

    <select data-bind="foreach: items">
        <option>Item <span data-bind="text: name"></span></option>
    </select> 

    为了处理这样的情况,你能用containerless语法,它是基于注释标签

    <select data-bind="foreach: items">
        <option>Item <!--ko text: name--><!--/ko--></option>
    </select>
    

    <!--ko-->和<!--/ko—> ,注释是充当开始/结束标记,定义一个‘virtual element’在包含的标记内,

    Knockout能理解virtual element的语法规则,并且能够绑定好,如果你有一个真正的容器元素

    注4: 关于IE6空白空格的怪癖

    IE6 有一个怪癖,如果 span里有空格的话,它将自动变成一个空的span。

    如果你想编写如下的代码的话,那Knockout将不起任何作用:

    Welcome, <span data-bind="text: userName"></span> to our web site.
    

    … IE6 将不会显示span中间的那个空格,你可以通过下面这样的代码避免这个问题:

    Welcome, <span data-bind="text: userName">&nbsp;</span> to our web site.
    

    IE6以后版本和其它浏览器都没有这个问题

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

  • 相关阅读:
    Qt计算器开发(三):执行效果及项目总结
    [HNOI2019]校园旅行
    How to fix nuget Unrecognized license type MIT when pack
    How to fix nuget Unrecognized license type MIT when pack
    git 通过 SublimeMerge 处理冲突
    git 通过 SublimeMerge 处理冲突
    git 上传当前分支
    git 上传当前分支
    gif 格式
    gif 格式
  • 原文地址:https://www.cnblogs.com/aaronjs/p/3197389.html
Copyright © 2011-2022 走看看