zoukankan      html  css  js  c++  java
  • Knockout.Js官网学习(text绑定)

    前言

    text 绑定到DOM元素上,使得该元素显示的文本值为你绑定的参数。该绑定在显示<span>或者<em>上非常有用,但是你可以用在任何元素上。

    简单绑定

    复制代码
    Today's message is: <span data-bind="text: myMessage"></span> 
    
    <script type="text/javascript" src="~/Scripts/knockout-2.3.0.debug.js"></script>   
    <script type="text/javascript">    
        var viewModel = {        
            myMessage: ko.observable()     
        };
        viewModel.myMessage("Hello, world!");
        ko.applyBindings(viewModel);
    </script>
    复制代码

        KO将参数值会设置在元素的innerText (IE)或textContent(Firefox和其它相似浏览器)属性上。原来的文本将会被覆盖。

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

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

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

     继续在上面的ViewModel中添加一个属性,并且添加一个依赖监控属性

    price: ko.observable(24.95)
        viewModel.priceRating = ko.dependentObservable(
            function () {
             return this.price() > 50 ? "expensive" : "affordable";
            }, viewModel);

    添加一个UI页面元素进行绑定

    The item is <span data-bind="text: priceRating"></span> today.

    现在,text文本将在“expensive”和“affordable”之间替换,取决于价格怎么改变。

    关于HTML encoding

    因为该绑定是设置元素的innerText或textContent (而不是innerHTML),所以它是安全的,没有HTML或者脚本注入的风险。例如:如果你编写如下代码:

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

     它不会显示斜体字,而是原样输出标签。如果你需要显示HTML内容,请参考html绑定.

    关于IE 6的白空格whitespace

    IE6有个奇怪的问题,如果 span里有空格的话,它将自动变成一个空的span。如果你想编写如下的代码的话,那Knockout将不起任何作用:

  • 相关阅读:
    -lpopt is not found while cross compiling for aarch64
    设置进程的cpu亲和性
    在ARM64位开发板上兼容ARM32位的可执行程序
    ARM开发板上查看动态库或者可执行程序的依赖关系
    交叉编译tmux
    使用PSCI机制的SMP启动分析
    将qemu使用的设备树dump出来
    故障review的一些总结
    理解Compressed Sparse Column Format (CSC)
    统计分析工程的依赖项
  • 原文地址:https://www.cnblogs.com/zxbzl/p/6004085.html
Copyright © 2011-2022 走看看