Knockout.js(四)：自定义绑定

　　除了内嵌的绑定，还可以创建一些自定义绑定，封装复杂的逻辑或行为。

　　注册绑定

　　添加子属性到ko.bindingHandlers来注册绑定:

ko.bindingHandlers.yourBindingName = {

    init: function(element, valueAccessor, allBindingsAccessor, viewModel) {

        // 第一次应用于元素时调用，在这里设置任何初始状态，事件处理程序等

    },

    update: function(element, valueAccessor, allBindingsAccessor, viewModel) {

        // 当绑定首先应用于元素时，将被调用一次，并且每当相关联的observable更改值时，都会被调用一次。并根据这里提供的值更新DOM元素。

    }

};

　　然后在DOM元素上调用：

<div data-bind="yourBindingName: someValue"> </div>

　　init和update这两个函数不是必须都定义，也可以只定义其中一个。

　　当管理的observable改变的时候，KO会调用回调函数，传递一下参数：

　　♦ element：使用这个绑定的DOM元素

　　♦ valueAccessor：JavaScript函数，通过valueAccessor()可以得到应用到这个绑定的model上的当前属性值。

　　♦ allBindingsAccessor：JavaScript函数，通过allBindingsAccessor ()得到这个元素上所有model的属性值。

　　♦ viewModel ：传递给ko.applyBindings使用的 view model参数，如果是模板内部的话，那这个参数就是传递给该模板的数据。

　　init回调

　　Knockout在DOM元素使用自定义绑定的时候会调用init函数。init的用途：

　　♦ 为DOM元素设置初始值

　　♦ 注册事件handle，例如当用户点击或者编辑DOM元素的时候，可以改变相关的的observable值的状态。

　　可以在页面第一次显示的时候设置该元素的状态（但是不使用任何动画效果），而只是让动画在以后改变的时候再执行。

ko.bindingHandlers.hideControl= {

    init: function(element, valueAccessor, allBindingsAccessor,viewModel) {

        var flag = localStorage.flag;

        // 获取本地存储中的flag值

        if(flag == 1){

            $(element).hide();

        }

    },

    update: function(element, valueAccessor, allBindingsAccessor,viewModel) {

    }

};

　　update回调

　　通过visible绑定来控制一个元素的可见性，但是想让该元素在隐藏或者显示的时候加入动画效果。可以自定义自己的绑定来调用jQuery的slideUp/slideDown函数

ko.bindingHandlers.slideVisible = {

    update: function(element, valueAccessor, allBindingsAccessor) {

        // 首先获取最新的绑定值

        var value = valueAccessor(), allBindings = allBindingsAccessor();        

        // 不管所提供的模型属性是否可观察到，获取其当前值

        var valueUnwrapped = ko.utils.unwrapObservable(value);

        // 从另一个绑定属性中获取更多数据，除非另有说明，否则默认为400ms

        var duration = allBindings.slideDuration || 400;

        // 操作DOM元素

        if (valueUnwrapped == true)

            $(element).slideDown(duration);

        else

            $(element).slideUp(duration);

    }

};

　　其他形式的事件

　　知道了如何使用update回调，当obeservable值改变的时候，可以更新相关的DOM元素，对于其他形式的事件（如用户点击某个element的事件）想要更新相关的observable值。

　　可以使用init回调来注册一个事件handle，这样可以改变相关的observable值。

ko.bindingHandlers.hasFocus = {

    init: function (element, valueAccessor) {

        $(element).focus(function () {

            var value = valueAccessor();

            value(true);

        });

        $(element).blur(function () {

            var value = valueAccessor();

            value(false);

        });

    },

    update: function (element, valueAccessor) {

        var value = valueAccessor();

        if (ko.utils.unwrapObservable(value))

            element.focus();

        else

            element.blur();

    }

};

　　在DOM上调用

<p>Name: <input data-bind="hasFocus: editingName"/></p>

<div data-bind="visible: editingName">You're editing the name</div>

<button data-bind="enable: !editingName(), click:function() { editingName(true) }">Edit name</button>

　　绑定viewModel

<script type="text/javascript">

    var viewModel = {

        editingName: ko.observable()

    };

    ko.applyBindings(viewModel);

</script>

巴特西

Knockout.js(四)：自定义绑定

最新文章

热门文章