zoukankan      html  css  js  c++  java
  • Text 绑定

    Text绑定

    目的

    Text绑定主要是让DOM元素显示参数值。

    通常情况下,该绑定在<span>和<em>这样的元素上非常有用,而实际上你可以绑定任何元素。

    示例

    1
    2
    3
    4
    5
    6
    7
    8
    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将参数值设置为元素内容。元素之前的内容将会被覆盖。

    如果参数是一个observable值,text绑定将会在值变化时更新元素text内容。如果参数不是observable值,text绑定仅仅会设置元素内容一次,以后不会再更新。

    如果你传入的不是一个值或者一个字符串(比如:你传入一个对象或者数组)那么显示的文本将是yourParameter.toString()的结果。

    其他参数

    传递多次text时使用这种写法

    <div data-bind="text:myText1"></div>
    <div data-bind="text:myText2"></div>

    <script>
    var viewModel = {
        myText1:ko.observable("nihao"),
        myText2:ko.observable("China")
    };
    ko.applyBindings(viewModel);
    </script>

    注意事项

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

    如果你想text值可编程化,一种选择是创建计算属性,然后在运算函数中编码决定text中显示什么。

    例如:

     

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    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);
      ko.applyBindings(viewModel);
    </script>

    现在,text值将会在“expensive”和“affordable”之间选择,而这主要取决于“price ”的变化。
    然而,假如你按照示例中的方式你则不需要创建计算属性。你可以传入任意的JavaScript表达式进行text绑定。

    例如:这个还没弄明白 

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

    注2:关于HTML编码

    由于text绑定是利用元素的text节点属性来设置文本值,你可以很安全的设置任何内容而不用担心HTML和脚本注入风险。例如,如果你输入以下内容:

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

    它将不会显示一个斜体文本,而是按原样进行标签输出。

    如果你想设置一个HTML内容,你可以参数HTML绑定。

    注3:使用“text”而没有一个容器元素   使用<!--ko--> 和<!--/ko-->

    有时你可能需要使用Knockout在不使用多余的元素的情况下通过text绑定来设置文本内容。例如,在option元素中是不允许存在其他元素的,所以下面的绑定是无法正常工作的。

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

    为了解决这个问题,你可以使用容器语法,它基于一个注释元素。

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

    <!--ko--> 和<!--/ko--> 注释标记作为起始和结束符,定义一个“虚拟元素”,里面包含了标记,Knockout能够识别这种虚拟元素语法和绑定作为你需要的容器元素而存在。

    注4:一个关于IE6 白空格

    IE6有一个奇怪的现象,如果span有空格的话,它会变成一个空span,如果你编写以下代码,Knockout不会起任何作用。

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

    IE6不会显示span中间的那个空格,如果你想避免这个问题,你可以在<span>中输入任意内容。比如:

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

    其他浏览器或者版本较新的IE浏览器不会出现这个问题。

  • 相关阅读:
    软件测试人员的年终绩效考核怎么应对
    收藏
    顶踩组件 前后两版
    订阅组件
    hdu 1963 Investment 完全背包
    hdu 4939 Stupid Tower Defense 动态规划
    hdu 4405 Aeroplane chess 动态规划
    cf 414B Mashmokh and ACM 动态规划
    BUPT 202 Chocolate Machine 动态规划
    hdu 3853 LOOPS 动态规划
  • 原文地址:https://www.cnblogs.com/jinling/p/4722182.html
Copyright © 2011-2022 走看看