Knockoutjs是一个JavaScript实现的MVVM框架。主要有如下几个功能:
1. Declarative bindings
2. Observables and dependency tracking
3. Templating
首先需要定义一个ViewModel:
- <script type="text/javascript">
- function ViewModel() {
- this.firstName = "Zixin";
- this.lastName = "Yin";
- }
- </script>
然后是一个用来显示这个ViewModel的View:
- <div>
- <p data-bind="text: firstName"></p>
- <p data-bind="text: firstName"></p>
- <input data-bind="value: firstName"/>
- <input data-bind="value: lastName"/>
- </div>
从这个view中可以看到声明式绑定的含义,只需要在标签上使用data-bind属性,就可以将数据的值绑定到相应的地方。有了View和ViewModel还需要代码将这两者关联起来:
- ko.applyBindings(new ViewModel());
将他们放到一起,注意,applyBinding那代码必须在页面全部加载完之后执行。页面显示为:
下面再看observables,这个功能不是与生俱来的,必须要把View Model设置为observable,方法如下:
- function ViewModel() {
- this.firstName = ko.observable("Zixin");
- this.lastName = ko.observable("Yin");
- }
其他都不需要改变,这时候,如果改变输入框中的值,当焦点离开的时候,可以发现p中的值也跟着改变了:
下面再看dependency tracking,也就是如果一个值依赖多各值,其中任何一个值发生变化,它都会自动发生变化. 这是通过computed方法实现的,代码如下:
- function ViewModel() {
- this.firstName = ko.observable("Zixin");
- this.lastName = ko.observable("Yin");
- this.fullName = ko.computed(function () { return this.lastName() + " " + this.firstName(); },this);
- }
联系客服