Question

我正在关注this tutorial，并希望将“添加”按钮移到foreach循环中。因此，每一行都有一个按钮，可以在最后添加新记录。

我的问题是移动表单似乎打破了一切。我现在有this (fiddle)：

<div data-bind="foreach: pages, visible: pages().length > 0">   
    <div class='page'>
        <span data-bind="text: title"></span>
        <form data-bind="submit: addPage">
            <button type="submit">Add Page</button>
        </form>
    </div>
</div>

<script type='text/javascript' src='knockout-3.0.0.js'></script>
<script>
var pageCounter=1;

function Page(data) {
    this.title=ko.observable("Page "+data.title);
}

function PageListViewModel() {
    // Data
    var self = this;
    self.pages = ko.observableArray([]);

    // Operations
    self.addPage = function() {
        self.pages.push(new Page({title: pageCounter}));
        pageCounter++;
    };
    self.removePage = function(page) { self.pages.remove(page) };

    self.addPage();
}

ko.applyBindings(new PageListViewModel());
</script>

如果您将<form>移到foreach之外，则按钮功能正常，但只有1个按钮。如何更改它以便每页上都有一个“添加页面”按钮？

Answer 1

您唯一需要做的就是使用$ parent引用，如下所示：

<form data-bind="submit:$parent.addPage">
    <button type="submit">Add Page</button>
</form>

这将在PageListViewModel对象上调用addPage。

Answer 2

将表单绑定更改为<form data-bind="submit: $root.addPage">。请注意添加$root，其中说：在“根”视图模型上调用addPage()方法。

此外，您无需绑定到表单即可使其正常工作。简单地使用带有点击装订的按钮会更加简洁：

<div data-bind="foreach: pages, visible: pages().length > 0">   
    <div class='page'>
        <span data-bind="text: title"></span>
        <button type="button" data-bind="click: $root.addPage">Add Page</button>
    </div>
</div>

以下是updated jsFiddle，其中显示了上述工作示例。

在foreach中“添加”按钮

2 个答案: