如何在这种情况下构建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）

回答

相关问题