小虾虎鱼

小虾虎鱼

Knockoutjs之初步认识

作者 禾惠 发表于 2015/01/28,最后修改于 2015/01/28

使用Knockoutjs已经有一年多了,从今天起我会在博客中不定期的写一些个人对Knockoutjs的理解以及分享一些开发中使用的案例。MVVM框架有很多,之所以选择Knockoutjs原因有三:第一、能够兼容IE6+,第二、源码压缩后相对Angularjs小,第三、同事的推荐(我承认这是主要原因,因为使用后才发现Knockoutjs的相关文档很少,每天要对这个官方的英文文档看好几遍,看了好几遍也是云里雾里,不过我还是坚持了下来,虽说原理不怎么懂,但对Knockoutjs的使用算是比较的熟了)。

本文主要是介绍对Knockoutjs的简单认识。Knockoutjs是一个MVVM框架,该框架有三大特性:

    1、观察者和依赖跟踪;

    2、声明绑定;

    3、模板。


那么如何使用Knockoutjs呢?个人理解是这样的:

    1、在js中定义一个模型myViewModel,myViewModel可以是对象也可以是实例,程序中的数据都是存储在Model中的;

    2、在视图中声明绑定。在视图中通过在HTML标签上添加data-bind属性配合Knockoutjs的绑定方法;

    3、最后通过ko.applyBindings(myViewModel)将定义的myViewModel与视图中声明的绑定关联到一起。


下面给一段简单的实例代码:

/// 模型
var myViewModel = {
	name: ko.observable('穗溪'),
	age: ko.observable(22)
};

/// 激活模型与视图的绑定关系
ko.applyBindings(myViewModel);
<!-- 视图 -->
<div>名称:<span data-bind="text:name"></span></div>
<div>年龄:<span data-bind="text:age"></span></div>

这样就完成了Knockoutjs的应用。我们把视图做一点点修改:

<!-- 视图 -->
<div>名称:<span data-bind="text:name"></span></div>
<div>年龄:<span data-bind="text:age"></span></div>
<div><input type="text" data-bind="value:name" /></div>

在文本框中输入任何内容,看看效果,是不是很酷?

本文就介绍到这里,如果你对Knockoutjs产生了兴趣,请继续关注小虾虎鱼。