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，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) };

演示JSFiddle。

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

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

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

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

的更多信息

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

1 个答案: