在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的成员值发生改变的时候被运行。

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

时间: 2024-10-28 02:33:03

在ASP.NET MVC中使用Knockout实践09,自定义绑定的相关文章

在ASP.NET MVC中使用Knockout实践01,绑定Json对象

本篇体验在ASP.NET MVC下使用Knockout,将使用EF Code First创建数据库.最后让Knockout绑定一个Json对象. 创建一个领域模型. namespace MvcApplication3.Models { public class Product { public int Id { get; set; } public string Name { get; set; } public string Category { get; set; } public deci

在ASP.NET MVC中使用Knockout实践07,自定义验证信息的位置与内容

在前两篇中,体验了Knockout的基本验证和自定义验证.本篇自定义验证信息的显示位置与内容. 自定义验证信息的显示位置 通常,Knockout的验证信息紧跟在input后面,通过validationMessage属性可以自定义验证信息的显示位置. @{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml"; } <style type="text/css">

在ASP.NET MVC中使用Knockout实践06,自定义验证、异步验证

在上一篇中体验了Knockout.Validation的基本验证,本篇体验自定义验证和异步验证. 自定义验证规则 ko.validation有一个rules属性,专门用来存放验证规则,它是一个键值对集合类型,key就是自定义验证规则的名称,value是一个json对象. @{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml"; } <style type="text/c

在ASP.NET MVC中使用Knockout实践03,巧用data参数

使用Knockout,当通过构造函数创建View Model的时候,构造函数的参数个数很可能是不确定的,于是就有了这样的一个解决方案:向构造函数传递一个object类型的参数data. <input data-bind="value: name"/><hr/> <select data-bind="options: categories, value: category" ></select><hr/> @

在ASP.NET MVC中使用Knockout实践04,控制View Model的json格式内容

通常,需要把View Model转换成json格式传给服务端.但在很多情况下,View Model既会包含字段,还会包含方法,我们只希望把字段相关的键值对传给服务端. 先把上一篇的Product转换成json格式,通过pre元素显示出来. <input data-bind="value: name"/><hr/> <select data-bind="options: categories, value: category" >&

在ASP.NET MVC中使用Knockout实践02,组合View Model成员、Select绑定、通过构造器创建View Model,扩展View Model方法

本篇体验使用ko.computed(fn)计算.组合View Model成员.Select元素的绑定.使用构造器创建View Model.通过View Model的原型(Prototype)为View Model添加扩展方法. □ 使用ko.computed(fn)计算成员 有时候,我们希望把View Model中的几个成员组合起来成为一个新成员,使用ko.computed(fn)可实现. 接着上一篇,为productViewModel这个json对象增加一个计算成员. <div data-bi

在ASP.NET MVC中使用Knockout实践05,基本验证

本篇体验View Model验证.Knockout的subscribe方法能为View Model成员注册验证规则. @{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml"; } <style type="text/css"> .error { color: red; } </style> <input data-bind="

在ASP.NET MVC中使用DropDownList

在ASP.NET MVC中,尽管我们可以直接在页面中编写HTML控件,并绑定控件的属性,但更方便的办法还是使用HtmlHelper中的辅助方法.在View中,包含一个类型为HtmlHelper的属性Html,它为我们呈现控件提供了捷径. 我们今天主要来讨论Html.DropDownList的用法,首先从Html.TextBox开始. Html.TextBox有一个重载方法形式如下: public static string TextBox(this HtmlHelper htmlHelper,

&lt;转&gt;ASP.NET学习笔记之在ASP.NET MVC中使用DropDownList

看到一篇关于dropdownlist的用法很好的阐述,比较清楚,留着,防止以后自己不记得,还可以瞅瞅. 在ASP.NET MVC中,尽管我们可以直接在页面中编写HTML控件,并绑定控件的属性,但更方便的办法还是使用HtmlHelper中的辅助方法.在View中,包含一个类型为HtmlHelper的属性Html,它为我们呈现控件提供了捷径. 我们今天主要来讨论Html.DropDownList的用法,首先从Html.TextBox开始. Html.TextBox有一个重载方法形式如下: publi