how to call knockout function in nested observable array

Question

I have a brand list and brands contains car list. Declared simple view model in knockout on http://jsfiddle.net/PZqEk/1/ . this.cars is undefined in removeCar function when clicking remove button. How to delete clicked car with best practice?

Html:

<h1 data-bind="text:title"></h1>
<table>
    <tbody data-bind="foreach: brands">
        <tr>
            <td>
                <span data-bind="text: nameOfBrand"></span>
                <ul data-bind="foreach: cars">
                    <li>
                        <span data-bind="text: nameOfCar"></span>
                        (<span data-bind="text: yearOfCar"></span>)
                        <input data-bind="click: $root.removeCar" type="button" value="remove"/>
                    </li>
                </ul>
            </td>
        </tr>
    </tbody>
</table>

Javascript:

function RootModel()
{
    this.title = ko.observable("Dummy Title");
    this.brands = ko.observableArray();

    var b1 = new brandModel("Audi");
    b1.cars.push(new carModel("A3", 2005));
    b1.cars.push(new carModel("A6", 2005));

    var b2 = new brandModel("Volkswagen");
    b2.cars.push(new carModel("Golf", 2010));
    b2.cars.push(new carModel("Passat", 2008));
    b2.cars.push(new carModel("Polo", 2012));

    this.brands.push(b1);
    this.brands.push(b2);
}

function brandModel(name)
{
    this.nameOfBrand = ko.observable(name);
    this.cars = ko.observableArray();

    this.removeCar = function(car){
        this.cars.remove(car); // this.cars = undefined;
    }
}

function carModel(name, year){
    this.nameOfCar = ko.observable(name);
    this.yearOfCar = ko.observable(year);
}

ko.applyBindings(new RootModel());

Thanks

Jeff Mercado · Accepted Answer · 2013-03-05 19:09:50Z

1

The problem is that you're accessing this from a function that is not called on the instance. You'll need an alias.

function brandModel(name) {
    var self = this; // alias
    self.nameOfBrand = ko.observable(name);
    self.cars = ko.observableArray();

    self.removeCar = function(car) {
        self.cars.remove(car); // access through the alias instead
    }
}

answered Mar 5, 2013 at 19:09

Jeff Mercado

136k34 gold badges268 silver badges282 bronze badges

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

1 Comment

Omer Faruk Zorlu Over a year ago

Yeah, sure this is it. declared var self = this; and its work :)

jonhopkins · Accepted Answer · 2013-03-05 19:25:29Z

0

Jeff is correct in that you should alias this (commonly by declaring self = this; at the top of a model), and I would recommend doing that for every Knockout application you make.

However, I did not notice that you were using this at first, and immediately tried this code:

<input data-bind="click: function(data, event) { $parent.removeCar(data); }" type="button" value="remove"/>

and as the only change to your fiddle, that worked.

edited Mar 5, 2013 at 19:25

answered Mar 5, 2013 at 19:18

jonhopkins

3,8523 gold badges30 silver badges39 bronze badges

1 Comment

Omer Faruk Zorlu Over a year ago

Yeah, sure this is it. declared var self = this; and its work :)

Collectives™ on Stack Overflow

how to call knockout function in nested observable array

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related