敲除:单击绑定以在层次结构中添加/删除项目

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

如何使重新启动和删除功能删除正确的项目？（JSON显示在演示下方）。谢谢！

Answer 1

您的问题是在您的"内部" remove方法中，您没有"当前选择"页面，Pagerow，Slide等信息的信息。

一种解决方案是将当前的$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) };

demo jsfiddle。

请注意，如果您内部是多个foreach绑定，则还需要使用$root访问"顶级"。

您也可以作为参数传递到$parent：root.removeRow.bind(null, $parent, $data)，在这种情况下，您的手柄看起来像这样：

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

您可以在文档中阅读更多有关其他参数传递选项的更多信息。