前言

您可以创造自身的自定义绑定 –
未有须求非要使用内嵌的绑定(像click,value等)。你能够你打包复杂的逻辑或行为,自定义很简单选择和起用的绑定。例如,你可以在form表单里自定义像grid,tabset等这么的绑定。

登记你的绑定

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

图片 1

<script type="text/javascript">
    ko.bindingHandlers.yourBindName = {
        init: function (element, valueAccessor, allBindingsAccessor, viewModel){
            ///绑定时,设置任何初始状态,事件处理程序
        },
        update: function (element,valueAccessor,allBindingsAccessor,viewModel) {
            ///绑定之后应用于dom元素上,然后观察dom元素的变化,进行相应调用更新
        }
    };
</script>

图片 2

下一场就足以在别的DOM成分上行使了:

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

你其实没供给把init和update这八个callbacks都定义,你能够只定义个中的自由叁个。

update回调

当保管的observable改变的时候,KO会调用你的update
callback函数,然后传递以下参数:

element — 使用那些绑定的DOM成分
valueAccessor
—JavaScript函数,通过valueAccessor()能够获取运用到这些绑定的model上的最近属性值。
allBindingsAccessor —JavaScript函数,通过allBindingsAccessor
()获得那几个成分上有着model的属性值。
viewModel — 传递给ko.applyBindings使用的 view
model参数,要是是模板内部的话,那那些参数正是传递给该模板的数目。

例如,你恐怕想经过
visible绑定来决定多少个要素的可知性,不过你想让该因素在隐身也许展现的时候插手动画效果。那您能够自定义本人的绑定来调用jQuery的slideUp/slideDown
函数:

图片 3

    ko.bindingHandlers.slidVisible = {
        update: function (element, valueAccessor, allBingingsAccessor, viewModel) {

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

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

            var duration = allBindings.slideDuration || 400;

            if (valueUnwrapped == true) {
                $(element).slideDown(duration);
            }
            else {
                $(element).slideUp(duration);
            }
        }
    };

图片 4

接下来您能够像这么使用你的绑定:

<div data-bind="slideVisible: giftWrap, slideDuration:600">You have selected the option</div>
<label><input type="checkbox" data-bind="checked: giftWrap" /> Gift wrap</label>

图片 5图片 6

左边是先河化的,左边是点击Check之后的
,你也能够运维查看效果,消失和产出都是潜移默化的机能,那自定义的绑定照旧不错的。

init回调

Knockout在DOM成分运用自定义绑定的时候会调用你的init函数。init有五个非常重要的用途:

1.为Dom成分设置起始值

二.挂号事件句柄,例如当用户点击或然编辑Dom成分的时候,你能够更改有关的observable值的情事。

KO会传递和update回调函数一样的参数。

此起彼伏上面包车型地铁例子,你能够像让slideVisible在页面第壹遍展示的时候设置该因素的景色(但是不使用此外动画效果),而只是让动画在之后改变的时候再举行。你能够如此来做:

图片 7

    ko.bindingHandlers.slideVisible = {
        init: function(element, valueAccessor) {
            var value = ko.utils.unwrapObservable(valueAccessor());
            $(element).toggle(value);
        },
        update: function (element, valueAccessor, allBingingsAccessor, viewModel) {

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

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

            var duration = allBindings.slideDuration || 400;

            if (valueUnwrapped == true) {
                $(element).slideDown(duration);
            }
            else {
                $(element).slideUp(duration);
            }
        }
    };

图片 8

那就是说giftWrap的开始值证明的是false(例如giftWrap:
ko.observable(false)),然后让起初值会让关系的DIV隐藏,之后用户点击checkbox的时候会让要素显示出来。

DOM事件之后更新observable值

您曾经值得了什么样使用update回调,当observable值改变的时候,你能够革新相关的DOM成分。不过任何情势的事件怎么做吗?比如当用户对某些DOM成分有有个别action操作的时候,你想翻新相关的observable值。

您能够动用init回调来注册2个风浪句柄,那样能够更改有关的observable值,例如

图片 9

    ko.bindingHandlers.hasfocus = {
        init: function (element, valueAccessor) {
            $(element).focus(function () {
                var value = valueAccessor();
            });
            $(element).blur(function () {
                var value = valueAccessor();
                value(false);
            });
        },
        update: function (element, valueAccessor) {
            var value = valueAccessor();
            if (ko.utils.unwrapObservable(value)) {
                element.focus();
            }
            else {
                elemen.blur();
            }
        }
    };

图片 10

近来你能够透过hasFocus绑定来读取大概写入那么些observable值了:

<h2>DOM事件之后更新observable值</h2>
<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>

当成分别得到得宗旨和失去主旨

图片 11图片 12

 

相关文章

网站地图xml地图