Tag Archives: framework

knockoutjs初探——MVVM框架

Backbone, ember, knockout算是比较火的三个前端MV*框架,受到Knockout.js vs Backbone.js文章的蛊惑,我决定尝试一下knockout。文中称Backbone的优势在于,对Rest接口的后台进行了一个很好的model,也就是说是一个不错的ORM(这个比喻让写过后台的人秒懂啊有木有!),而对于DOM操作,这种属于controler范围的东西,Backbone没有一个集中编写的位置,也没有提供任何方便,你需要自己用jquery去操纵。因此,Backbone非常_“灵活”_。

继续Knockout。Knockout有个牛逼的在线教程,灰常有用。

Textarea和p

在前端实现MVC框架都有一个问题,View可能会接受大量用户输入,并进行改变。

Knockout对input类型和p类型都可以进行model的绑定,

<p data-bind="text: question"></p>
<select data-bind="options: [1,2,3,4,5], value: points"></select>

这里就是对p元素绑定text类型的变量question。question是在js中的ViewModel中定义的,具体绑定细节就请移步教程~ question是一个observable

question = ko.observable("Are you hungry?")

当需要改变question的值时,使用

question("Are you happy?") //change value
question()    //read value

让人想起来setters和getters啊。question的值一旦改变,所有data-bind相关的view都会改变。

text这个类型,很明显是一个文档值类型,我们可以相见,还会有html类型用来直接传入html。Knockout的模板当然不止提供这些,还提供例如:foreach(循环block内部的内容),visible(满足条件才可视),click等等。例如:

<h3 data-bind="visible: value() > 3 ">value居然大于3了</h3>

只有当value()的值大于3的时候才会显示h3的内容

<button href="#” data-bind="enable: value()>3, click: onclick"></button>

相当于绑定了一个回调函数。

显然,你也可以自定义,这个成为bindingHandlers。

bindingHandlers的init和update

bingingHandler的定义如下:

ko.bindingHandlers.yourhandler = {
    init: function(element, accessValue){},
    update: function(element, accessValue){}
}

update很好理解,当元素内容发生改变的时候,通过选中$(element),利用accessValue()里的值进行操作。这个accessValue就是html中跟在visible或者text或者yourhandler后面的值,需要通过accessValue()调用返回。

init是什么的?一般需要自定义handler是希望实现一些动画,但是,如果只有update,当页面第一次加载的时候,只能执行update中的例如,fadeOut()动画,于是,页面就相当于闪了一下,多不和谐。于是,你可以自定义init来改变handler第一次加载时的行为。

真贴心啊!

于是,你就可以这样写了。

<p data-bind="yourhandler: value"></p>

init在页面加载的时候只执行一次,这意味着!可以在里面再另外写一些辅助性的绑定哦~~~

//...    
$(element).hover(function(){}, function(){})
$("span", element).each(function(){ $(this).addClass('span'); })
//...