Observable array where each item in array contains an array - how to make the inner array observable

Question

Issue: I have Json coming back from the server. The Json is an array of businesses where each business can have multiple contacts. I want to make the contacts an observable array also, so that html elements bound to the contacts get updated upon deletion and the array gets updated upon editing.

I've setup the following jsFiddle - http://jsfiddle.net/rdotlee/GCwjX/1/.

Here is my view model from the jsFiddle.

    var businessViewModel =
{
    allBusinesses: ko.observableArray([
                                        { name: "Biz1", id: 1, Contacts: [{ name: "Joe", email: "test@test", phone: "555-111-1111" }, { name: "Smith", email: "smith@test", phone: "777-111-2223"}] },
                                        { name: "Biz2", id: 2, Contacts: [{ name: "Joe", email: "test@test", phone: "555-222-1111" }, { name: "Smith", email: "smith@test", phone: "555-111-2222"}] }
                                      ]),

    businessId: ko.observable(1)

};

businessViewModel.selectedBusiness = ko.dependentObservable(function () {
    var biz = this.allBusinesses()[0];

    for (var i = 0; i < this.allBusinesses().length; i++) {
        if (this.allBusinesses()[i].id == this.businessId()) {
            biz = this.allBusinesses()[i];
            break;
        }
    }
    return biz;
}, businessViewModel);

businessViewModel.removeContact = function (contact) {
    ko.utils.arrayRemoveItem(this.selectedBusiness().Contacts, contact);
    ko.applyBindings(businessViewModel, $("#sectionBusinesses")[0]);
} .bind(businessViewModel);

What is the cleanest / recommended way to do what I need?

Thanks,

Check the beginning of this blog post: knockmeout.net/2011/04/utility-functions-in-knockoutjs.html — AlexG
– AlexG, Commented Sep 7, 2012 at 6:06

MHollis · Accepted Answer · 2012-09-07 12:57:55Z

1

First off, I'm not sure why you're calling ko.applyBindings every time a contact is removed. You'll generally only ever want to call applyBindings once, any more than that usually causes problems.

I would recommend using the ko.mapping plugin, which will make the whole process rather painless.

I've also updated your removeContact to work with the updated ViewModel and changed your selectedBusiness a little too.

Here's the fiddle: http://jsfiddle.net/GCwjX/5/ and the code:

var jsonData = {
    allBusinesses: [{
        name: "Biz1",
        id: 1,
        Contacts: [{
            name: "Joe",
            email: "test@test",
            phone: "555-111-1111"},
        {
            name: "Smith",
            email: "smith@test",
            phone: "777-111-2223"}]},
    {
        name: "Biz2",
        id: 2,
        Contacts: [{
            name: "Joe",
            email: "test@test",
            phone: "555-222-1111"},
        {
            name: "Smith",
            email: "smith@test",
            phone: "555-111-2222"}]}]
};
var businessViewModel = {
    allBusinesses: ko.observableArray(),
    businessId: ko.observable(1)
};

businessViewModel.selectedBusiness = ko.dependentObservable(function() {
    var biz = this.allBusinesses()[0];
    biz = ko.utils.arrayFirst(this.allBusinesses(), function(item) { 
        return (item.id() === parseInt(this.businessId())); 
    }, this);
    return biz;
}, businessViewModel);

businessViewModel.removeContact = function(contact) {
    this.selectedBusiness().Contacts.remove(contact);
}.bind(businessViewModel);

ko.mapping.fromJS(jsonData, {}, businessViewModel);
ko.applyBindings(businessViewModel);

answered Sep 7, 2012 at 12:57

MHollis

1,4699 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

RDotLee Over a year ago

Hi @MHollis - thanks for your help and the updated JsFiddle. The reason I was calling applyBindings a second time was to try and make knockout apply the bindings again to see the contact was removed, I realized it wasn't the recommended way to go, but was troubleshooting. I will do some research on the mappings they are not clear to me yet. Thanks!

Collectives™ on Stack Overflow

Observable array where each item in array contains an array - how to make the inner array observable

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related