knockoutjs简单使用
2014-02-14 09:36
295 查看
knockoutjs是一个不错的前端MVVM框架,极大的减轻了前端工作开发量,增加前端代码的维护性。主要特点:声明式绑定、依赖跟踪、模块开速开发。
如下代码(官方代码稍做修改)
将看到以下结果:
![](http://images.cnitblog.com/blog/371959/201402/140929259613120.jpg)
改就姓氏,显示的姓氏和全名将动态改变,不过有个细节,那就是如果改变姓氏后,不去点击页面,会发现姓氏开始并没有变,当点了页面时才变。这就是knockoutjs的一个特性,事件驱动来触发UI更新,详情可参看官方文档。
在线效果演示:http://jsfiddle.net/leez20120909/vLTbp/5/
如下代码(官方代码稍做修改)
<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);
将看到以下结果:
![](http://images.cnitblog.com/blog/371959/201402/140929259613120.jpg)
改就姓氏,显示的姓氏和全名将动态改变,不过有个细节,那就是如果改变姓氏后,不去点击页面,会发现姓氏开始并没有变,当点了页面时才变。这就是knockoutjs的一个特性,事件驱动来触发UI更新,详情可参看官方文档。
在线效果演示:http://jsfiddle.net/leez20120909/vLTbp/5/
相关文章推荐
- ASP.NET使用确认对话框得简单方法
- Quartz 最简单使用,没有用到配置文件,不适用于项目
- Github 简单使用入门--WindowsXP
- ORACLE实用函数之一 ratio_to_report的简单使用
- [WS]使用Axis发布简单的Web服务
- Ant安装设置,简单使用测试
- 怎样制作一个简单ip,以方便在Quartus II和Nios II中使用?.[Nios II][中]
- ASP.NET 使用application与session对象写的简单聊天室程序
- 简单快速的上手使用gitbash
- websocket++简单使用例子
- Redis集群搭建与简单使用
- JSON简单使用
- windows下Nginx与tomcat组合简单使用
- fresco简单使用
- TCPDUMP的简单使用
- W3 Jmail使用详细教程+简单实例
- ZOJ 1312 题解这是一道简单题但容易出错,不需要使用任和算法就可做出来,而且很快。我的AC 0ms
- java swing jtree简单界面使用
- 百度地图使用-简单使用
- java注解的简单使用