3

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>

なんらかの理由で、デバッグで出力に相対値が 4 回表示されます。データ配列には、観測可能にした相対値が 4 つしかありません。私のhtmlには冗長なエントリが表示されます。配列を間違えていないことは明らかです。明らかに4つの要素がありますが、foreachループが奇妙に動作しています。

ノックアウトを使用した 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 コード ブロックから追加された on click delete を追加すると、私のリストには何も表示されなくなります。私のデバッグは、データにも何もないことを示しており、表示されません。

4

1 に答える 1

1

これを試して：

意見

<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>

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("");

    },

    remove: function(item) {
        viewModel.relatives.remove(item);
    },
};

ko.applyBindings(viewModel);​
于 2012-04-17T16:55:00.890 に答える