如何为这种情况构建 Knockout JS（使用 ASP.NET MVC）答案

【问题标题】：How to structure Knockout JS for this scenario (Using ASP.NET MVC)如何为这种情况构建 Knockout JS（使用 ASP.NET MVC）
【发布时间】：2013-05-07 04:01:12
【问题描述】：

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

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

据我所知，最初填充有几个选项：

A1。从 .NET 输出我的 Knockout 用来填充的 JSON 字符串一个汽车阵列。
A2。每个 Car 元素都有一个 data-id="x" 属性，用于填充的 Knockout。

并且有几个选项可以将数据存储在敲除中：

B1。 Viewmodel 有一系列指标（参考 .NET ids) 和对象的每个属性的数组。
B2。 Viewmodel 具有一组自定义 JS 对象（汽车），然后具有 id、color、type 等属性。

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

【问题讨论】：

标签： javascript asp.net-mvc knockout.js

【解决方案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>

【讨论】：

嘿 lagerone，谢谢我自己花了一点时间想出了完全相同的解决方案，这令人鼓舞，我喜欢这种组合，因为我不想使用 AJAX 获取初始数据跨度>

【解决方案2】：

处理来自服务器的复杂数据列表的最简单方法是使用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

【讨论】：