.ajaxデータでknockoutjsビューモデルを初期化する方法

Question

次のコードは、ハードコードされた配列（initialData1）でうまくいきますが、モデルを初期化するためにjquery .ajax（initialData）を使用する必要があります。

$(function() { 

     function wiTemplateInit(winame, description) { 
      this.WIName = winame 
      this.WIDescription = description 
     } 

     var initialData = new Array; 

     var initialData1 = [ 
      { WIName: "WI1", WIDescription: "WIDescription1" }, 
      { WIName: "WI1", WIDescription: "WIDescription1" }, 
      { WIName: "WI1", WIDescription: "WIDescription1" }, 
     ]; 
     console.log('gridrows:', initialData1); 

     $.ajax({ 
      type: "POST", 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      data: "{UserKey: '10'}", 
      url: "WIWeb.asmx/GetTemplates", 
      success: function (data) { 
       for (var i = 0; i < data.d.length; i++) { 
        initialData.push(new wiTemplateInit(data.d[i].WiName,data.d[i].Description)); 
       } 
       //console.log('gridrows:', initialData); 
       console.log('gridrows:', initialData); 
      } 
     }); 

     var viewModel = function (iData) { 
      this.wiTemplates = ko.observableArray(iData); 

     }; 

     ko.applyBindings(new viewModel(initialData)); 

    }); 

しかし私は、ほとんどすべての例は、ビューモデルに渡されるハードコーディングされたデータを示し、knockoutjsのウェブサイト上の例から作業しようとしています。

Answer 1

あなたのブラウザのログを表示すると、あなたの問題（特にポストとレスポンス）についてもっと詳しく言うことができます。私はあなたにajaxでデータをロードし、テンプレートをバインドし、それらを操作で操作して保存する方法を示す簡単な例を用意しました。これはあなたの問題を解決するのに役立ちます

希望：http://jsfiddle.net/gurkavcu/KbrHX/

概要：

// This is our item model 
function Item(id, name) { 
    this.id = ko.observable(id); 
    this.name = ko.observable(name); 
} 

// Initial Data . This will send to server and echo back us again 
var data = [new Item(1, 'One'), 
      new Item(2, 'Two'), 
      new Item(3, 'Three'), 
      new Item(4, 'Four'), 
      new Item(5, 'Five')] 

// This is a sub model. You can encapsulate your items in this and write actions in it 
var ListModel = function() {  

    var self = this;  
    this.items = ko.observableArray(); 
    this.remove = function(data, parent) { 
     self.items.remove(data); 
    }; 
    this.add = function() { 
     self.items.push(new Item(6, "Six")); 
    }; 
    this.test = function(data, e) { 
     console.log(data); 
     console.log(data.name()); 
    }; 
    this.save = function() {   
     console.log(ko.mapping.toJSON(self.items)); 
    }; 
} 

// Here our viewModel only contains an empty listModel 
function ViewModel() { 
    this.listModel = new ListModel(); 
}; 

var viewModel = new ViewModel(); 

$(function() { 
    $.post("/echo/json/", { 
     // Data send to server and echo back 
     json: $.toJSON(ko.mapping.toJS(data)) 
    }, function(data) { 

    // Used mapping plugin to bind server result into listModel 
    // I suspect that your server result may contain JSON string then 
    // just change your code into this 
    // viewModel.listModel.items = ko.mapping.fromJSON(data); 

    viewModel.listModel.items = ko.mapping.fromJS(data); 

    ko.applyBindings(viewModel); 
}); 
}) 

Answer 2

はあなたの "WIWeb.asmx/GetTemplates" を確認して正確な構造{WINameでオブジェクトのJSON配列を返します。 ' 」、WIDescription： 『』} この

function wiTemplateInit(winame, description) 
    { 
     var self = this; 
     self.WIName = winame; 
     self.WIDescription = description; 
    } 

    function ViewModel() 
    { 
     var self = this; 
     self.wiTemplates = ko.observableArray(); 

     $.ajax({ 
      type: "POST", 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      data: "{UserKey: '10'}", 
      url: "WIWeb.asmx/GetTemplates", 
      success: function (data) 
      { 
       var mappedTemplates = $.map(allData, function (item) { return new wiTemplateInit(item.WiName, item.Description) }); 
       self.wiTemplates(mappedTemplates); 

      } 
     }); 
    } 

    var vm = new ViewModel(); 

    ko.applyBindings(vm);