Knockout foreach 循环迭代相同的数据元素

Knockout foreach loop iterating same data element

本文关键字：数据 元素 foreach 循环 迭代 Knockout      更新时间：2023-09-26

我有一个包含 4 个元素的数组，并通过绑定传递给 foreach 循环。

   <ul data-bind="foreach: relatives">
        <li>
            <span data-bind="text: First"></span>
            <span data-bind="text: Last"></span>
            <span>
                <a href="#" class="tag-edit">Edit</a> 
                <a href="#" class="tag-delete">Delete</a>
            </span>
        </li>
    </ul>

出于某种原因，我的输出在我的调试中给了我一个亲戚四次，我在我使可观察的数据数组中只有四个亲戚。我的 html 显示冗余条目。很明显，我的数组没有出错，它显然有 4 个元素，但 foreach 循环表现得很奇怪。

使用Knockout的Javascript：

var data = [
    { Id: 1, First: "John", Last: "Doe", Address: "76 Hero Ave" },
    { Id: 2, First: "Bill", Last: "Doe", Address: "467 Nantucket Rd" },
    { Id: 3, First: "Sue", Last: "Doe", Address: "467 Nantucket Rd" },
    { Id: 4, First: "Jane", Last: "Doe", Address: "76 Hero Ave" },
];
var viewModel = {
    // data
    relatives: ko.observableArray(data),
    firstNameToAdd: ko.observable(""),
    lastNameToAdd: ko.observable(""),
    // behaviors
    addRelative: function () {
        this.relatives.push({ First: this.firstNameToAdd(), Last: this.lastNameToAdd()        });
        this.firstNameToAdd("");
        this.lastNameToAdd("");
    }
};
$(document).on("click", ".tag-delete", function () {
    var itemToRemove = ko.dataFor(this);
    viewModel.relatives.remove(itemToRemove);
});
ko.applyBindings(viewModel);

添加从 viewModel 代码块中单击删除后，我的列表将不再显示任何内容。我的调试显示我也没有数据并且没有显示。

试试这个：

视图

<ul data-bind="foreach: relatives">
    <li>
        <span data-bind="text: First"></span>
        <span data-bind="text: Last"></span>
        <span>
            <a href="#" class="tag-edit">Edit</a> 
            <a href="#" data-bind="click: $parent.remove">Delete</a>
        </span>
    </li>
</ul>

爪哇语

var data = [
    { Id: 1, First: "John", Last: "Doe", Address: "76 Hero Ave" },
    { Id: 2, First: "Bill", Last: "Doe", Address: "467 Nantucket Rd" },
    { Id: 3, First: "Sue", Last: "Doe", Address: "467 Nantucket Rd" },
    { Id: 4, First: "Jane", Last: "Doe", Address: "76 Hero Ave" },
];
​var viewModel = {
    // data
    relatives: ko.observableArray(data),
    firstNameToAdd: ko.observable(""),
    lastNameToAdd: ko.observable(""),

    // behaviors
    addRelative: function() {
        this.relatives.push({
            First: this.firstNameToAdd(),
            Last: this.lastNameToAdd()
        });
        this.firstNameToAdd("");
        this.lastNameToAdd("");
    },
    remove: function(item) {
        viewModel.relatives.remove(item);
    },
};
ko.applyBindings(viewModel);​
相关文章：