淘汰赛：单击绑定到层次结构中的 add/remove 项

Question

我想了解如何从淘汰层次结构中调用 add/delete 函数。例如，如果我在嵌套的 foreach 中，然后单击删除按钮，我如何调用一个函数来删除该项目（以及做一些其他事情）？

这是一个 Fiddle 的问题。 https://jsfiddle.net/4a3z4urc/

在 html 中，注释掉的按钮有效，但我需要该函数位于我的脚本标签内（这不起作用）。

function ViewModel(data){
    var self = this;
    self.pages = ko.mapping.fromJS( data );
    self.OutputJson = function(){
        console.log(ko.toJSON(self));
    }

    self.removePage = function(pageName) { self.pages.remove(pageName) };
    self.removeRow = function(rowType) { self.pages.pageRows.remove(rowType) };
    self.removeSlide = function(slide) { self.slides.remove(slide)  };
    self.addSlide = function(slide) {}
}

如何让 RemoveRow 和 RemoveSlide 函数删除正确的项目？（Json 显示在演示下方）。谢谢！

Answer 1

你的问题是在你的"inner"remove方法中你没有"currently selected"页面、pageRow、幻灯片等的信息

一种解决方案是将当前 $parent 传递到您的点击处理程序中：

<div data-bind="foreach: pageRows">
    <section style="border:1px solid pink; padding:5px;">

      <button type="submit" data-bind="click: $root.removeRow.bind($parent, $data)" 
          class="btn-delete"><i>&times;</i></button>

     ...
   </section>
</div>

现在您可以在处理程序中使用 this 访问 "currently selected" 页面：

self.removeRow = function(rowType) { this.pageRows.remove(rowType) };

演示 JSFiddle.

请注意，如果内部有多个 foreach 绑定，您还需要使用 $root 来访问 "top level"。

您还可以将 $parent 作为参数传入：root.removeRow.bind(null, $parent, $data)，在这种情况下，您的句柄将如下所示：

self.removeRow = function(page, rowType) { page.pageRows.remove(rowType) };

您可以阅读更多关于不同 additional paramter passing options in the documentation.

淘汰赛：单击绑定到层次结构中的 add/remove 项

Knockout: click binding to add/remove item in hierarchy

knockout-mapping-plugin

knockout.js