在ASP.NET MVC中使用Knockout实践09，自定义绑定

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的值随之闪动并变化。