CODEWITHSUNDEEP
javascriptasp.net-mvc-3knockout.js
Naomarius
Naomarius

Reputation: 35

Knockout foreach loop iterating same data element

I have an array of 4 elements and are passed by binding to foreach loop.

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

For some reason my output is giving me a relative four times in my debug I only have four relatives in my data array I made observable. My html shows redudant entries. It's pretty clear cut I didn't make a mistake with my array it clearly has 4 elements to it but the foreach loop is acting strange.

Javascript using Knockout:

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

With the added on click delete from the viewModel code block added, my list will no longer display anything. My debug shows I have nothing in data as well and doesn't show up.

Upvotes: 3

Views: 962

Answers (1)

Jason More
Jason More

Reputation: 7073

Try this:

View

<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);​

Upvotes: 1

Related Questions