在大多数情况下，数据绑定属性提供了一种干净和简洁的方式来绑定到视图模型。然而，事件处理是一个常常会导致详细数据绑定属性的领域，因为匿名函数通常是传递参数的推荐技术。例如：

<a href="#" data-bind="click: function() { viewModel.items.remove($data); }">

    remove

</a>

作为替代，Knockout提供了两个帮助函数，它们允许您标识与DOM元素关联的数据：

ko.dataFor(element) - 返回可用于与元素绑定的数据
ko.contextFor(element) - 返回DOM元素可用的整个绑定上下文

这些帮助函数可以在事件处理程序中使用，这些事件处理程序使用类似于jQuery的绑定或单击的方式地附加。上面的函数可以连接到每个链接一个删除类，如：

$(".remove").click(function () {

    viewModel.items.remove(ko.dataFor(this));

});

更好的是，这种技术可以用于支持事件委托。 jQuery live / delegate / on函数是一个简单的方法来实现这一点：

$(".container").on("click", ".remove", function() {

    viewModel.items.remove(ko.dataFor(this));

});

现在，单个事件处理程序在更高级别附加，并处理与remove类的任何链接的点击。此方法还具有自动处理动态添加到文档的附加链接（可能是由于项目添加到observableArray的结果）的额外好处。

示例：嵌套子节点

此示例显示父级和子级的多个级别上的“add”和“remove”链接，每个类型的链接具有单个处理程序。

UI源码：

<ul id="people" data-bind='template: { name: "personTmpl", foreach: people }'>

</ul>

<script id="personTmpl" type="text/html">

    <li>

        <a class="remove" href="#"> x </a>

        <span data-bind='text: name'></span>

        <a class="add" href="#"> add child </a>

        <ul data-bind='template: { name: "personTmpl", foreach: children }'></ul>

    </li>

</script>

视图模型源码：

var Person = function(name, children) {

    this.name = ko.observable(name);

    this.children = ko.observableArray(children || []);

};

var PeopleModel = function() {

    this.people = ko.observableArray([

        new Person("Bob", [

            new Person("Jan"),

            new Person("Don", [

                new Person("Ted"),

                new Person("Ben", [

                    new Person("Joe", [

                        new Person("Ali"),

                        new Person("Ken")

                    ])

                ]),

                new Person("Doug")

            ])

        ]),

        new Person("Ann", [

            new Person("Eve"),

            new Person("Hal")

        ])

    ]);

    this.addChild = function(name, parentArray) {

        parentArray.push(new Person(name));

    };

};

ko.applyBindings(new PeopleModel());

//attach event handlers

$("#people").on("click", ".remove", function() {

    //retrieve the context

    var context = ko.contextFor(this),

        parentArray = context.$parent.people || context.$parent.children;

    //remove the data (context.$data) from the appropriate array on its parent (context.$parent)

    parentArray.remove(context.$data);

    return false;

});

$("#people").on("click", ".add", function() {

    //retrieve the context

    var context = ko.contextFor(this),

        childName = context.$data.name() + " child",

        parentArray = context.$data.people || context.$data.children;

    //add a child to the appropriate parent, calling a method off of the main view model (context.$root)

    context.$root.addChild(childName, parentArray);

    return false;

});

无论嵌套链接如何嵌套，处理程序总是能够识别和操作适当的数据。使用这种技术，我们可以避免将处理程序附加到每个链接的开销，并可以保持标记清洁和简洁。

巴特西

KnockoutJS 3.X API 第七章其他技术(5) 使用其他事件处理程序

示例：嵌套子节点

最新文章

热门文章

巴特西

KnockoutJS 3.X API 第七章 其他技术(5) 使用其他事件处理程序

示例：嵌套子节点

最新文章

热门文章

KnockoutJS 3.X API 第七章其他技术(5) 使用其他事件处理程序