如何针对这种情况构造Knockout JS（使用ASP.NET MVC）

Question

我刚刚开始淘汰赛。 在我的视图中，显示了汽车列表。

最初是为汽车填充JS数组的最佳方法是什么，随后又是在JS中将列表存储以进行查找，添加，删除等的最佳方法是什么？

据我所知，最初填充有一些选项：

• A1。 从.NET输出一个JSON字符串，我的Knockout用来填充一个Car数组。
• A2。 在每个Car元素上都有一个data-id =“ x”属性，Knockout用于填充该属性。

还有一些用于将数据存储在剔除中的选项：

• B1。 Viewmodel有一个索引数组（指.NET id）和该对象的每个属性的数组。
• B2。 Viewmodel具有一组自定义JS对象（汽车），然后具有id，color，type等属性。

这是处理这些情况的最佳方法。 我在猜A1和B2？ 我有点担心在B2上的查找速度很慢，因为它将需要一个自定义的迭代器才能找到objectWithID（x）

Answer 1

我的建议是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>

Answer 2

处理来自服务器的复杂数据列表的最简单方法是使用Knockout映射插件 。

使用动态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/

您可能还对我之前写过的类似答案感兴趣： 动态列和带有淘汰表的行