javascript - 从 subview 模型修改在父级上可观察到的 knockout 的模式

Question

我设置了父 subview 模型对象结构，需要从子对象更新父对象的可观察对象。我基本上想出了两种模式:

1] 将父属性的引用传递给子属性并从子属性中更新属性:

var ParentViewModel = function(){
    var self = this;
    this.selectedItem = ko.observable();
    this.child = ko.observable(new ChildViewModel(self.selectedItem));
}

var ChildViewModel = function(parentSelectedItem){
    var self = this;
    this.id = ko.observable();
    this.parentSelectedItem = parentSelectedItem;
    this.select = function(){
        self.parentSelectedItem(self);
    }
}

2] 在父级上创建子级的 select 方法并在本地引用父级可观察对象:

var ParentViewModel = function(){
    var self = this;
    this.selectedItem = ko.observable();

    var child = new ChildViewModel();
    child.select = function(){
        self.selectedItem(child);
    }
    this.child = ko.observable(child);
}

var ChildViewModel = function(){
    this.id = ko.observable();
}

这些模式都没有让我目瞪口呆。第一个将整个属性引用推送到 subview 模型中，第二个在子范围之外定义子函数。

关于如何以干净且可测试的方式在 javascript 中实现此操作，是否有人有任何其他模式建议？还是我或多或少被这两个选项所困？

Answer 1

在 Knockout 中执行此操作的最常见模式是在接受子项的父项上放置一个“selectChild”方法。在大多数情况下，实际的 child 不需要知道它正在被选中。

然后在您的绑定(bind)中，您可以绑定(bind)到 $root.selectChild 或 $parent.selectChild。传递给绑定(bind)到点击/事件绑定(bind)的处理程序的第一个参数是实际数据(在 KO 2.0 中)，因此您的方法可以存在于父级上并接收子级作为第一个参数。

var Item = function(id, name) {
    this.id = id;
    this.name = ko.observable(name);    
};

var ViewModel = function() {
    var self = this;
    this.items = ko.observableArray([
        new Item(1, "one"),
        new Item(2, "two"),
        new Item(3, "three")
    ]);  

    this.selectedItem = ko.observable();

    this.selectItem = function(item) {
        self.selectedItem(item);
    };     
};

在这种情况下，您的绑定(bind)将如下所示:

<ul data-bind="foreach: items">
    <li>
        <a href="#" data-bind="text: name, click: $root.selectItem"></a>
    </li>
</ul>

在 jsFiddle 中:http://jsfiddle.net/rniemeyer/anRsA/

您甚至可以进一步简化它。 Observable 是函数，您传递给它们的第一个参数用于设置它们的值，因此您甚至可以选择不包含 selectItem 方法并简单地绑定(bind) $root.selectedItem 直接(看起来像:http://jsfiddle.net/rniemeyer/anRsA/1/)。我通常使用一个单独的方法来明确，给它一个适当的名称( Action )，以防在设置项目之前或之后需要进行额外的处理。

在 KO 2.0 之前(其中引入了 $root 和 $parent 以及将数据作为第一个参数传递给 click 和 event 处理程序)，我过去经常使用您建议的第一种方法。您可以做的一件事实际上是不创建子属性 (this.parentSelectedItem)，而只是直接在 中引用 parentSelectedItem(作为参数传递) >select 方法，因为创建的闭包使得它在函数中可用。