首页 > Web开发 > 详细

knockoutjs简单使用

时间:2014-02-14 23:03:01      阅读:436      评论:0      收藏:0      [点我收藏+]

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

如下代码(官方代码稍做修改)

bubuko.com,布布扣
<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);
bubuko.com,布布扣

将看到以下结果:

bubuko.com,布布扣

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

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

knockoutjs简单使用

原文:http://www.cnblogs.com/lee5945/p/3549021.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!