KnockoutJs beta 3.0 -如何销毁子元素

Question

目前我有一个设置看起来像这样:

    ko.applyBindings(viewModel);
    $(".removeButton").live("click", function() {
        viewModel.ProductCategories.destroy(ko.dataFor(this));
    });
    $(".renameButton").live("click", function() {
        ko.dataFor(this).Name("Renamed Successfully!");
    });

这对我来说很好，直到我引入了子元素的概念。此时，remove事件不再对这些项起作用。

是否有更通用的方式来"销毁"一个元素?

KO显然知道我正在点击的元素(因为我可以重命名)。

[{"Id":1,"Name":"Bikes","Parent":null,"Children":[{"Id":5,"Name":"Mountain Bikes","Parent":1,"Children":null},{"Id":6,"Name":"Road Bikes","Parent":1,"Children":null},{"Id":7,"Name":"Touring Bikes","Parent":1,"Children":null}]},{"Id":2,"Name":"Components","Parent":null,"Children":[{"Id":8,"Name":"Handlebars","Parent":2,"Children":null},{"Id":9,"Name":"Bottom Brackets","Parent":2,"Children":null},{"Id":10,"Name":"Brakes","Parent":2,"Children":null},{"Id":11,"Name":"Chains","Parent":2,"Children":null]}]

上面的事件都可以作用于任何元素(子元素或其他元素)，除了remove，它只作用于根元素。

我可以对元素本身调用remove吗?还是我必须添加一些方法来确定它在数组中的位置并像那样销毁它?

例如

;这是最好的:

    $(".removeButton").live("click", function() {
        ko.dataFor(this).destroy();
    });

:

    $(".removeButton").live("click", function() {
          viewModel.ProductCategories[someindex].Children.destroy(ko.dataFor(this));
    });

谢谢,寇汗

Answer 1

主要问题是在试图销毁一个项时确定父数组是谁。

几个选项:您可以使用ko.contextFor而不是ko.dataFor，它将返回一个包含$data, $parent, $parents和$root等属性的对象。

如果您的数组具有相同的名称，那么您可以这样做:http://jsfiddle.net/rniemeyer/xJjK8/

如果数组有不同的名称，那么可以在button元素上添加提示以理解父元素的名称，例如:http://jsfiddle.net/rniemeyer/arpNx/

否则，如果您真的希望它是泛型的，那么您可以使用with绑定来强制作用域块，这将允许您通过$parent访问父数组。然而，这将是未包装的数组，我们真正想要的是observableArray。通过一些额外的工作，您可以循环遍历父类的父类的属性，并将底层数组与未包装的数组进行比较，以定位您希望对项调用destroy的实际observableArray。像这样:http://jsfiddle.net/rniemeyer/bBVrE/

最后，如果你注意对象的创建方式，你可以将destroy功能推入项目本身，而不需要直接访问父类。下面是一个示例，展示了将destroyMe方法添加到使用传递给构造函数的父对象:http://jsfiddle.net/rniemeyer/Eeryh/