0

ブランドリストがあり、ブランドには車のリストが含まれています。http://jsfiddle.net/PZqEk/1/のノックアウトで宣言された単純なビュー モデル。削除ボタンをクリックすると、removeCar 関数で this.cars が未定義になります。ベストプラクティスでクリックされた車を削除するには?

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

ありがとう

4

2 に答える 2

1

this問題は、インスタンスで呼び出されていない関数からアクセスしていることです。エイリアスが必要です。

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
    }
}
于 2013-03-05T19:09:50.447 に答える
0

thisジェフは、 (通常はモデルの先頭で宣言することによって) エイリアスを作成する必要があるという点で正しく、self = this;作成するすべての Knockout アプリケーションに対してエイリアスを作成することをお勧めします。

しかし、最初はあなたが使用していることに気付かずthis、すぐに次のコードを試しました。

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

そして、あなたのフィドルへの唯一の変更として、それはうまくいきました。

于 2013-03-05T19:18:12.190 に答える