发布于 2017-01-14 12:36:28 | 141 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的精品教程，程序狗速度看过来！

Knockout.js JavaScript的UI库

Knockout 是个JavaScript library，帮助创建丰富的显示和编辑器UI，通过干净的底层数据模型。你可以在任何时候动态更新UI的选择部分。

---

本文讲解Knockout 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将不起任何作用。