淘汰赛：单击绑定以添加/删除层次结构中的项目

Question

我想了解如何从淘汰层次结构中调用添加/删除函数。例如，如果我在嵌套的 foreach 中，并且单击了一个删除按钮，我如何调用一个可以让我删除该项目的函数（也可以做一些其他事情）？

这里有一个问题。 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

您的问题是，在您的“内部”remove 方法中，您没有“当前选定”页面、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 访问“当前选定”页面：

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

演示JSFiddle.

请注意，如果您内部有多个foreach 绑定，您还需要使用$root 来访问“顶级”。

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

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

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