站长资源
全栈工程师站点

Knockout.js入门【一】

前段时间做项目一直在用knockout,虽然用着不怎么利索,但是知识是一点一点探索的。

首先介绍一下 Knockout是什么?

他是一个很优秀的js库,他最大的功能就是实现双向绑定,它可以帮助你仅使用一个清晰整洁的底层数据模型(data model)即可创建一个富文本且具有良好的显示和编辑功能的用户界面。任何时候你的局部UI内容需要自动更新(比如:依赖于用户行为的改变或者外部的数据源发生变化),KO都可以很简单的帮你实现,并且非常易于维护。

如何使用Knockout

简单来说在knockoutjs中,每个HTML的DOM对象都是通过data-bind属性来绑定数据的。首先你需要把knockoutjs添加到页面中或者模板中,开始使用ko,首先你需要定义一个viewmodel;

<script>

varViewModel ={

firstName = ko.observable(first);

lastName = ko.observable(last);

};

ko.applyBindings(ViewModel)

</script>

接下来需要做的是,把viewmodel的firstName和lastName两个属性绑定到HTML的DOM对象。

如果是使用input来绑定:

<p>First name: <inputdata-bind="value: firstName"/></p>

<p>Last name: <inputdata-bind="value: lastName"/></p>

如果是使用span来绑定:

<p>First name: <inputdata-bind="text: firstName"/></p>

<p>Last name: <inputdata-bind="text: lastName"/></p>

运行结果:

Knockout.js入门【一】 -1

因为ko是MVVM模式,所以当任何绑定了某个属性的地方修改该属性值时,其它地方也会随之变化。就像上面的输入框”First name”变化为”你不好”时,那个span中得”你好”也会变为”你不好”

knockoutjs是MVVM模式它的实现原理如下图:(发挥一下我设计的优势)

Knockout.js入门【一】 -2

KO和Jquery(prototype等)是相互竞争还是可以兼容一起使用?

我个人比较喜欢用Jquery!对于各种不一致的DOM对象操作的API方法,Jquery的出现,很出色的代替了以往种种笨拙的框架,显得灵活易用。Jquery在Web页面元素操作和事件处理上显得相当出色并且易用,而KO是解决另外不同的问题的。

当你的UI界面稍微复杂且含有一些相同的行为的话,如果你仅仅只使用Jquery,那么UI处理上会比你想象的要复杂棘手,同时会让维护费用相当昂贵。思考这样一个例子:在一个表格里显示一个项目列表,统计表格中列表的数量,当项目列表数量小于5时启用“Add”按钮,否则就禁用。Jquery没有基本的数据模型概念,所以你想要获取项目列表的数量,你需要从表格table/tr/div这些数量上去进行推断才能知道。如果需要在某些SPAN里显示数据的数量,当添加新数据的时候,你还要记得更新这个SPAN的text。当然,你还要记住当总数>=5条的时候,你需要禁用Add按钮。然后,如果还要实现Delete功能的时候,你不得不指出哪一个DOM元素被点击以后需要改变。

而使用用Knockout来实现

就会变成非常简单。它可以让你很轻易的扩展项目的复杂度,而不必担心由此产生的数据不一致问题。它仅仅只需要将你的数据转换成一个JavaScript数组,然后使用foreach将数据数组绑定到页面中的一个表格table或者一组div中。每当数据数组发生变化时,UI界面会自动响应改变(你不需要指出如何插入新行或在哪里插入),剩下的就是UI界面数据同步了。

当然ko的知识还有很多,各种绑定事件,在接下来,我会不断总结。

本文出处:来自互联网信息共享,请勿相信收费信息站长资源 » Knockout.js入门【一】

评论 抢沙发

评论前必须登录!