Knockout真正强大之处在于绑定机制,通过data-bind
属性值体现绑定,不仅可以绑定值,还可以绑定事件,甚至可以自定义绑定。
从一个例子看Knockou的绑定机制
假设想给一个button元素变成jQuery UI的button,大致这样做:
<button id="btn">点我</button>$(‘#btn‘).button( icons: { primary: ‘ui-icon-gear‘ } );
"他山之石,可以攻玉",实际上Knockout可以通过它的绑定机制来借用其它js类库实现相同的功能。如果能做到以下这样就好了:
<button data-bind="jqButton: { icons: { primary: ‘ui-icon-gear‘ } }">点我</button>
如果我们想给Knockout增加自定义绑定,必须通过ko.bindingHandlers
属性。
<button data-bind="click: sayHello, jqButton: { icons: { primary: ‘ui-icon-gear‘ } }">点我</button>
@section scripts{<script src="~/Scripts/knockout-3.2.0.js"></script><script type="text/javascript">ko.bindingHandlers.jqButton = {init: function (element, valueAccessor) {var options = valueAccessor() || {};$(element).button(options);ko.utils.domNodeDisposal.addDisposeCallback(element, function () {$(element).button("destroy");});}};var vm = {sayHello: function () {alert("hello");}};ko.applyBindings(vm);</script>}
以上,通过ko.bindingHandlers
,增加了一个名称为jqButton
的绑定。
到这里,有必要了解一下Knockout的绑定机制了。
ko.bindingHandlers.myCustomBinding = {init: function(element, valueAccessor, allBindingsAccessor, data, context) {},update: function(element, valueAccessor, allBindingsAccessor, data, context) {}};
init
函数只在元素第一次绑定的时候运行。通常用来给元素绑定一个handler。update
函数只在View Model中,具有observable的成员值发生改变的时候被运行。
init
和update
包含5个参数:
○ element
表示实施绑定的DOM元素
○ valueAccessor
表示传值给绑定机制的函数,该函数可能是View Model中具有Observable的成员,也有可能是json对象。
○ allBindingsAccessor
用来获取运用在同一DOM元素上的所有绑定
○ data
用来获取View Model
○ context
绑定的上下文,包括$data, $parent, $parents, $root等属性
更新View Model的时候让DOM元素闪一下
绑定无非就是关乎View Model和Dom元素,现在,当View Model中具有Obserable的成员值反生变化的时候,让DOM元素闪一下(实际上就是让DOM元素先隐藏再慢慢显现)。根据绑定机制,肯定要自定义update
函数。
@{ViewBag.Title = "Index";Layout = "~/Views/Shared/_Layout.cshtml";}<h2>Index</h2><style type="text/css">.main {background-color: #CCC;}</style><div class="main" data-bind="flash: name"><span data-bind="text: name"></span></div><hr/><input data-bind="value: name"/>@section scripts{<script src="~/Scripts/knockout-3.2.0.js"></script><script type="text/javascript">ko.bindingHandlers.flash = {update: function(element, valueAccessor) {ko.utils.unwrapObservable(valueAccessor());$(element).hide().fadeIn(500);}};var vm = {name: ko.observable("darren")};ko.applyBindings(vm);</script>}
每当input值发生变化,div区域总会闪一下。
给现有的绑定再套上一层绑定
比如说,Knockout已经有了一个名称为text的绑定,当View Model中具有Obserable的成员值发生改变,绑定text的DOM元素值也会随之发生变化。如果我们想让text值发生变化的时候闪动一下,该如何做呢?
<input data-bind="value: name"/><hr/><span data-bind="fadeText: name"></span>@section scripts{<script src="~/Scripts/knockout-3.2.0.js"></script><script type="text/javascript">ko.bindingHandlers.fadeText = {update: function(element, valueAccessor) {$(element).hide();ko.bindingHandlers.text.update(element, valueAccessor);$(element).fadeIn(500);}};var vm = {name: ko.observable("darren")};ko.applyBindings(vm);</script>}
以上,当input值发生变化的时候,span的值随之闪动并变化。