如何在這種情況下構建Knockout JS（使用ASP.NET MVC）

我剛剛開始Knockout。在我的視圖中，我列出了顯示的汽車列表。如何在這種情況下構建Knockout JS（使用ASP.NET MVC）

什麼是最初填充JS數組對汽車的最佳途徑，也是隨後，什麼是存儲在查找JS列表中的最好方法，添加，刪除等

據我看到它，最初有幾種選擇：

A1。從.NET輸出一個JSON字符串，我的Knockout用來填充一個Car數組。
A2。在每個Car元素上都有一個data-id =「x」屬性， Knockout用來填充。

而且還有存儲在淘汰賽中的數據的幾個選項：

B1。 Viewmodel有一系列的指示符（指的是.NET ID）以及該對象的每個屬性的數組。
B2。 Viewmodel有一個自定義的JS對象（汽車）數組，然後具有像id，顏色，類型等屬性。

這是處理這些情況的最佳方法。我在猜測A1 & B2？我有點擔心B2正在慢速查找，因爲它需要自定義迭代器來查找objectWithID（x）

來源

2013-05-07 Baconbeastnz

我的建議是A1和B2。由於淘汰賽的工作原理，在大多數情況下查找不會成爲問題。 Knockout也有幾個util助手來協助這樣的操作，閱讀這篇文章http://www.knockmeout.net/2011/04/utility-functions-in-knockoutjs.html。

我創造了這個小提琴告訴你我會如何構建它：http://jsfiddle.net/ts8DW/

<script> 
    var carsArrayDataFromServer = [ 
     { 
      name: 'audi', 
      color: 'red' 
     }, 
      { 
      name: 'volvo', 
      color: 'blue' 
     }, 
     { 
      name: 'toyota', 
      color: 'green' 
     } 
    ]; 
    var CarModel = function (data) { 
     this.name = data.name; 
     this.color = data.color; 
    }; 

    var ViewModel = function(carsArray) { 
     var self = this; 

     self.cars = ko.observableArray([]); 

     self.delete = function(item) { 
      self.cars.remove(item); 
     }; 

     self.init(carsArray); 

    }; 
    ViewModel.prototype = { 
     init: function(data) { 
      if (!data) return; 
      var self = this; 
      ko.utils.arrayForEach(data, function(item) { 
       self.cars.push(new CarModel(item)); 
      }); 
     } 
    }; 

    ko.applyBindings(new ViewModel(carsArrayDataFromServer), document.getElementById('cars-app')); 
</script> 

<div id="cars-app"> 
    <ul data-bind="foreach: cars"> 
     <li> 
      <span data-bind="text: name"></span> 
      <a href="#" data-bind="click: $parent.delete"> 
       Delete 
      </a> 
     </li> 
    </ul> 
</div>

來源

2013-05-07 05:19:58 lagerone

嘿lagerone，謝謝我只是花了一點時間自己，並提出了完全相同的解決方案，所以這些鼓勵，我喜歡這種混合，因爲我d不想使用AJAX獲取最初的數據 – Baconbeastnz 2013-05-07 07:18:30

處理來自服務器的複雜數據的列表使用Knockout mapping plugin最簡單的方法。

使用動態data-x HTML屬性無視Knockout的目的，即用數據填充靜態 HTML（模板）。改爲使用Ajax從服務器請求數據模型。

function CarViewModel(data) { 
    var self = this, 
     loaded = new Date(); 

    ko.mapping.fromJS(data, {}, self); 

    self.displayName = ko.computed(function() { 
     return [data.color, data.year, data.make, data.model].join(" "); 
    }); 
} 

function CarListViewModel() { 
    var self = this; 

    self.cars = ko.observableArray(); 

    self.load = function() { 
     $.get("cars.json") 
     .then(function (data) { 
      var carMapping = { 
       key: function (data) { 
        return ko.utils.unwrapObservable(data.id); 
       }, 
       create: function (options) { 
        return new CarViewModel(options.data); 
       } 
      }; 
      ko.mapping.fromJS(data, carMapping, self.cars); 
     }); 
    }; 
} 

ko.applyBindings(new CarListViewModel());

（請注意，這取決於例如jQuery的爲Ajax請求。）

看到這個搗鼓演示/解釋：http://jsfiddle.net/Tomalak/Pbh6S/

您可能也有興趣在一個類似的答案我之前寫道：dynamic column and rows with knockoutjs

來源

2013-05-07 06:55:17 Tomalak

如何在這種情況下構建Knockout JS（使用ASP.NET MVC）

回答

相關問題