当我看到我的淘汰赛页面的一些结果时，我正在写一个演示，我很震惊。这是结果：
我所做的很简单，当有人要求加载数据时，我会执行以下操作：
self.items = ko.observableArray([]);
self.colors = ko.observableArray([]);
self.productModels = ko.observableArray([]);
self.loadData = function() {
var buffer;
$.getJSON('/Product/InventoryData')
.success(function(allData) {
buffer = [];
buffer = $.map(allData, function(item) { return new SDF.Data.DTO.ProductDto(item); });
self.items(buffer);
})
.error(function() {
alert("error on load data");
});
$.getJSON('/Product/GetColors')
.success(function(allData) {
buffer = [];
ko.utils.arrayForEach(allData, function (item) {
buffer.push(item);
});
self.colors(buffer);
})
.error(function () {
alert("error on load colors");
});
$.getJSON('/Product/GetProductModels')
.success(function (allData) {
buffer = [];
ko.utils.arrayForEach(allData, function (item) {
buffer.push(item.Name);
});
self.productModels(buffer);
})
.error(function () {
alert("error on load product models");
});
};
所有服务器方法的结果都被缓存，而且速度非常快。颜色和产品模型也是可观察的，因为我想让用户能够更改每个打印项目的产品“颜色”或“模型”。我加载的数据量只有 100 项。
按照我的html：
<tbody data-bind="foreach: items">
<tr>
<td>
<input type="text" data-bind="value: name" />
</td>
<td>
<select data-bind="options: $root.colors, optionsCaption: 'Choose...'">
</select>
</td>
<td>
<input type="number" data-bind="value: price" />
</td>
<td>
<select data-bind="options: $root.productModels, optionsCaption: 'Choose...'">
</select>
</td>
<td>
<label data-bind="text: qty">
</label>
</td>
<td>
<a href="#" id="product-sell">Sell</a>
</td>
<td>
<a href="#" id="product-edit"></a>
</td>
</tr>
</tbody>
除了“page it”之外的任何建议都值得赞赏。
更新 1
我发现这是问题所在，但现在我不知道如何解决它。问题是我如何编写每个项目的选择。可能有 repaint foreach 项目。怎么能避免呢？
更新 2
我发现的最佳解决方案是在我的标记中使用 Knockoutjs If-binding：http: //knockoutjs.com/documentation/if-binding.html