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

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

<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;
    });

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

    posted @ 2016-10-19 11:05  SmallProgram  阅读(841)  评论(0编辑  收藏  举报