0

現在、 KnockoutJS ショッピング カートの例を拡張して、JSON コレクションから既存の行をプリロードしようとしています。

たとえば、次のようなオブジェクトがあります。

var existingRows = [{
        "Category":Classic Cars,
        "Product":2002 Chevy Corvette,
        "Quantity":1,
    }, {
        "Category":Ships,
        "Product":Pont Yacht,
        "Quantity":2,
}];

例を変更して、ロード時にグリッドに 2 つの行を入力し、コンボボックスが JSON オブジェクトの項目に事前設定されるようにしようとしています。

このオブジェクトを JSFiddle でうまく動作させることはできないようですが、Cart 関数と CartLine 関数を変更し、ApplyBindings を次のように呼び出します。

var CartLine = function(category, product) {
    var self = this;
    self.category = ko.observable(category);
    self.product = ko.observable(product);
    // other code
}

var Cart = function(data) {
    var self = this;
    self.lines = ko.observableArray(ko.utils.arrayMap(data, function(row) { return new CartLine(row.Category, row.Product);}))
    // other code
}

ko.applyBindings(new Cart(existingRows));

これにより、ロード時に 2 つの行が正しく挿入されますが、ドロップダウン リストは設定されません。どんな助けでも大歓迎です:)

4

2 に答える 2

4

問題は、CartLine オブジェクトのcategoryおよびオブザーバブルの値が単純な文字列ではないことです。productそれらは実際のオブジェクトcategoryです。たとえば、製品と同じように、その例で提供されているサンプル データから特定のカテゴリを参照します。しかし、それらを文字列に設定しているだけです。

(別の問題は、文字列の周りに引用符がないため、JS オブジェクトの existingRows が有効な JavaScript ではないことです)

その例を既存のRows オブジェクトで動作させるには、サンプル データから関連するカテゴリと製品を抽出できます。

var Cart = function(data) {
    // Stores an array of lines, and from these, can work out the grandTotal
    var self = this;
    self.lines = ko.observableArray(ko.utils.arrayMap(data, function(row) {
        var rowCategory = ko.utils.arrayFirst(sampleProductCategories, function(category) {
            return category.name == row.Category;
        });
        var rowProduct = ko.utils.arrayFirst(rowCategory.products, function(product) {
            return product.name == row.Product;
        });

        return new CartLine(rowCategory, rowProduct, row.Quantity);
    }));
    // other code
}

更新されたフィドル: http://jsfiddle.net/antishok/adNuR/664/

于 2012-08-27T07:12:04.600 に答える