1

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

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

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

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

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

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

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

4

2 回答 2

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>
于 2013-05-07T05:19:58.123 回答
1

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

使用动态data-xHTML 属性违背了 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/

您可能还对我之前写的类似答案感兴趣：动态列和行与敲除js

于 2013-05-07T06:55:17.680 回答