2

JSON ファイルを読み込んでから、各項目を挿入しようとしています。

だから私はこのコードを持っています

function ProductType(id, name) {
var self = this;

self.id = id;
self.name = name;
}


function ProductsViewModel() {
    var self = this;
    var jqxhr = $.getJSON("data/product.json").success(function(data, status, xhr) { 
          self.products = ko.observableArray([    
      $.each(data.data.productTypeList, function(i,item){
          new ProductType(i, item.longName);
    })
]);               
      })
     .error(function() { alert("error"); })
     .complete(function() {
        console.log("fetch complete + " + this);
     });

}

各関数からオブザーバブル配列に挿入するベストプラクティスについて疑問に思いました

現時点では、このエラーが発生します

エラー: 500 エラー get /knockoutJQMProducts/#products バインディングを解析できません。メッセージ: ReferenceError: 製品が定義されていません。バインディング値: foreach: 製品

ただし、各ステートメント内で console.log(i) を実行すると、結果が返されます。

ありがとう

4

2 に答える 2

3

ryadavilliの答えは良いですが、配列をキャッシュしてからobservableArrayを一度に設定することで改善できます。

function ProductsViewModel() {
    var self = this;
    self.products = ko.observableArray();
    var jqxhr = $.getJSON("data/product.json").success(function(data, status, xhr) {
        var products = [];
        $.each(data.data.productTypeList, function(i, item) {
            products.push(new ProductType(i, item.longName));
        });
        self.products(products);
    })
        .error(function() {
            alert("error");
        })
        .complete(function() {
            console.log("fetch complete + " + this);
        });
}
于 2012-11-21T17:54:12.260 に答える
2

監視可能な配列が成功時に移入されるように、VMと成功メソッドを変更しました。しかし、それは常に存在します。

function ProductsViewModel() {
    var self = this;
    self.products = ko.observableArray();    
    var jqxhr = $.getJSON("data/product.json").success(function(data, status, xhr) { 
      // use this remove all only if you want to clear and load with new data.
       self.products.removeAll();
       $.each(data.data.productTypeList, function(i,item){
          self.products.push(new ProductType(i, item.longName));
     })
  })
 .error(function() { alert("error"); })
 .complete(function() {
    console.log("fetch complete + " + this);
 });
}
于 2012-11-20T06:43:58.963 に答える