如何使用.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);