使用KnockoutJS自動綁定

我想將List => List => List => List對象綁定到Knockout JS視圖模型中。使用KnockoutJS自動綁定

我從$的getJSON數據如下 Main Object type description

我試圖映射插件來創建一個視圖模型，如： - VAR視圖模型= ko.mapping.fromJS（d.organisationsData）;

和問題是我不知道爲什麼（/否）映射正常發生。

我無法使用數據綁定來遍歷這個列表和innerList性能

這是我的ViewModel對象

View model object

我試圖使用迭代數據 - bind：for-each ListOfOrg，它顯示未找到綁定錯誤ListOfOrg。

<ul data-bind="foreach:ListOfOrg">

我是新來KnockoutJS，所以我想有一些非常愚蠢的我做的，如果是請點我在正確的方向。

來源

2013-06-27 Rohith Nair

好吧，讓我們通過一個簡單的例子，想象我們想要在頁面上顯示一些活動。

比方說，你的數據恢復是的活動，都具有一定的屬性是一個枚舉，那麼你的活動可能看起來是這樣的：

var ActivityType = function (data) { 
     var self = this; 
     self.Id = ko.observable(data.Id); 
     self.Name = ko.observable(data.Name); 
     self.Description = ko.observable(data.Description); 
     self.Selected = ko.observable(data.Selected); };

然後你有一個視圖模型其中有一個叫做Activities的屬性，它需要映射到這個活動模型，所以當你得到你的活動枚舉時，它會爲你在該數組中自動生成相同數量的New ActivityTypes。

var activitiesViewModel = {};

，所以我們定義的是（簡單地說，新ActivityTypes用不同的ID的那些那麼然後創建一個新的）的映射工具：

var ActivityTypeDataMappingOptions = { 
     key: function (data) { 
      return data.Id; 
     }, create: function (options) { 
      return new ActivityType(options.data, null); 
     } 
    }

所以現在我們需要在活動屬性查看模型：

activitiesViewModel.Activities = mapping.fromJS([]);

這意味着根據映射數據創建一個可觀察數組。

比方說，你有一個DataContext定義，讓您您的數據，然後在回調：

datacontext.getActivities(function (data) { 
    mapping.fromJS(data.Activities, ActivityTypeDataMappingOptions, activitiesViewModel.Activities); 
    ko.applyBindings(activitiesViewModel); 
});

mapping.fromJS需要3個參數，可以收集多數民衆贊成將擁有的數據第一個，第二個我們定義的映射實用程序使得新活動超出並保留了包含可觀察集合的視圖模型的屬性。

所以，現在你可以使用此類似：

<ul data-bind="foreach: Activities"> 
    <li><input type='text' data-bind="value: Name" /></li> 
</ul> 
<button data-bind="click: updateActivities">Update Activities</button>

注：在本例視圖模型是一個單身，但你可能要根據您的使用使用顯露原型模式使之成爲一個可實例化對象。然後當你調用ko.applyBindings時，你需要傳遞新的activitiesViewModel（）作爲參數。

現在用於更新和發送回我們需要定義updateActivities結果：

activitiesViewModel.updateActivities = function(){ 
    // Let's say our data context also has a setActivities method that requires a payload of activities object for Post 
    datacontext.setActivities({ 
     // as activitiesViewModel.Activities is an observable array then this will always have the latest values which might have changed in your UI 
     activities : ko.toJSON(activitiesViewModel.Activities) 
    }, function(data){ 
    // Lets say the POST will return true if the call was successful 
     if (data) alert("all done"); 
    }); 
};

您也可以綁定這個功能改變，甚至輸入但是這將是太多API來電，所以我不推薦它。
如果您製作了很多這些模型，然後由視圖模型使用，您將很快意識到您正在進行大量已經在服務器端完成的建模。如果您編寫一些自動生成包含模型的js文件的服務器端代碼，例如ActivityType在我的示例中，您可以簡單地使用requireJS將它們導入視圖模型文件中，然後在整個應用程序中使用它們。這將允許通過僅更新後端中的模型而在前端自動提供屬性名稱更改和更新。

來源

2013-06-27 10:50:07 XGreen

謝謝@XGreen的解釋。我使用以下方式成功綁定到html var organisationData = data.d; var orgObject = { organisationsData：organisationData }; var newviewmodel = ko.viewmodel.fromModel（orgObject）; 你能告訴我如何附加一個偵聽器，以便我可以調用一個ajax函數時，我的基礎數組對象更改？ –

已更新答案以顯示更新方法 – XGreen

答案是否提供瞭解決方案？ – XGreen

使用KnockoutJS自動綁定

回答

相關問題