在淘汰赛中使用关系数据设置选择的正确方法？答案

【问题标题】：Proper way to set up select with relational data in knockout?在淘汰赛中使用关系数据设置选择的正确方法？
【发布时间】：2014-03-26 09:52:00
【问题描述】：

我想创建一个包含位置数组的选择框，并且所选位置绑定到一个可观察对象。我的问题是：我做对了吗？对我来说，创建一个包含数据的可观察数组似乎很奇怪，然后必须将实际值绑定到另一个变量，以便我可以动态创建选择框。有没有更好的方法？

另外，最后我还要制作 7 个（一周中的每一天一个）。这将如何影响事情？我假设我的 location_id 会变成observableArray，但我仍然会以同样的方式构建选择吗？

这是我的（有点伪）代码：

var TimeEntriesModel = function (locations) {
    var self = this;

    self.locations = ko.observableArray(ko.utils.arrayMap(locations, function (location) {
        return new LocationViewModel(location);
    }));

    location_id = ko.observable(434051968);
}

var LocationViewModel = function(location) {
    var self = this;

    self.location_id = location.id;
    self.location_name = location.name;
    self.location_abbrv = location.abbreviation;
}

var entriesModel = new TimeEntriesModel(locationsdata);

ko.applyBindings(entriesModel);


var locationsdata = [
    {
        "id": "434051968",
        "name": "Serbia",
        "abbreviation": "SERBIA"
    },
    {
        "id": "434051969",
        "name": "Michigan - Detroit",
        "abbreviation": "DT"
    },
    {
        "id": "434051970",
        "name": "California - Los Angeles",
        "abbreviation": "LS"
    },
    {
        "id": "434051971",
        "name": "Macedonia",
        "abbreviation": "MACEDONIA"
    }];

然后选择：

<select data-bind="foreach: $root.locations, value: $root.location_id" class="form-control selectpicker" data-live-search="true">
    <option data-bind="value: location_id, text: location_name, attr: {title: location_abbrv}" ></option>
</select>

还有一个小提琴：http://jsfiddle.net/s5nDs/

【问题讨论】：

标签： javascript mvvm knockout.js

【解决方案1】：

是的，它是完全有效的，如果你想让代码更干净一点，那么 arrayMap 代码可以像这样分离：-

var locationsArray= ko.utils.arrayMap(locations, function (location) {
    return new LocationViewModel(location);
});
self.locations = ko.observableArray(locationsArray);

还有

location_id = ko.observable(434051968);//location id is not bind to self so you can not see observable behavior of location id.

这样做。

self.location_id = ko.observable(434051968);

http://jsfiddle.net/s5nDs/2/

【讨论】：

好吧，我只是想确认一下。这似乎与我习惯的做法背道而驰。

【解决方案2】：

如果程序运行时位置的数据不会改变，则不需要它是 observableArray（或 observable）。

可能值得记住的是，observableArray 只是一个“常规”可观察对象，具有一些额外的实用功能。我不知道您到底在构建什么，但您可能需要一个“可观察数组”，而不是“可观察数组”来获取结果。

【讨论】：