knockoutjs简单使用

浏览数：19 / 时间：2015年06月09日

   knockoutjs是一个不错的前端MVVM框架，极大的减轻了前端工作开发量，增加前端代码的维护性。主要特点：声明式绑定、依赖跟踪、模块开速开发。

如下代码（官方代码稍做修改）

<p> 姓氏: <strong data-bind="text:firstName"></strong></p>
<p>名字: <strong data-bind="text:lastName"></strong></p>
<p>全名: <strong data-bind="text:fullName"></strong></p>
<p>姓氏:<input type="text" data-bind="value:firstName"/></p>

function AppViewModel() {
    var self=this;
    self.firstName = ko.observable("张");
    self.lastName = ko.observable("三");
    self.fullName = ko.computed(function() {
    return self.firstName() + " " + self.lastName();    
}, self);
}
ko.applyBindings(new AppViewModel);

将看到以下结果：

改就姓氏，显示的姓氏和全名将动态改变，不过有个细节，那就是如果改变姓氏后，不去点击页面，会发现姓氏开始并没有变，当点了页面时才变。这就是knockoutjs的一个特性，事件驱动来触发UI更新，详情可参看官方文档。

在线效果演示：http://jsfiddle.net/leez20120909/vLTbp/5/

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： 代码 ie class ip text io t color blog java im 代码 ie class ip text io t color blog java im

相关文章

随机文章

您可能还喜欢

您可能还喜欢