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

r囧r小猫 2021-11-02 12:32 203阅读 0赞

Knockout真正强大之处在于绑定机制，通过`data-bind`属性值体现绑定，不仅可以绑定值，还可以绑定事件，甚至可以自定义绑定。

从一个例子看Knockou的绑定机制

假设想给一个button元素变成jQuery UI的button，大致这样做：

$('#btn').button( icons: { primary: 'ui-icon-gear' } );

"他山之石，可以攻玉"，实际上Knockout可以通过它的绑定机制来借用其它js类库实现相同的功能。如果能做到以下这样就好了：

如果我们想给Knockout增加自定义绑定，必须通过`ko.bindingHandlers`属性。

@section scripts

{

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`的绑定。

[![1][]][1 1]

到这里，有必要了解一下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>

.main {

background-color: #CCC;

}

</style>

</div>

<hr/>

@section scripts

{

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>

}

[![2][]][2 1]

每当input值发生变化，div区域总会闪一下。

给现有的绑定再套上一层绑定

比如说，Knockout已经有了一个名称为text的绑定，当View Model中具有Obserable的成员值发生改变，绑定text的DOM元素值也会随之发生变化。如果我们想让text值发生变化的时候闪动一下，该如何做呢？

<hr/>

@section scripts

{

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

转载于:https://www.cnblogs.com/darrenji/p/4072955.html

[1]: /images/20211101/3e4032f3099443a09f8f1dfb134e5276.png
[1 1]: https://images0.cnblogs.com/blog/417212/201411/041026214087170.png
[2]: /images/20211101/65ce332066cc4ff89b2b2fe70344d869.png
[2 1]: https://images0.cnblogs.com/blog/417212/201411/041026246893569.png