jQuery를 사용하여 녹아웃에서 관찰 가능한 배열에 삽입하는 좋은 방법

Question

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 : products

하지만 각 결과 내에서 console.log (i)를 사용하면 결과가 반환됩니다.

감사

Answer 1

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

Answer 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); 
}); 
}