Question

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

另外，最后我还要制作其中的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/

Answer 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/

Answer 2

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

值得注意的是，observableArray只是一个“常规”可观察对象，具有一些额外的实用功能。我不知道你究竟在构建什么，但你可能需要一个“可观察数组”，而不是结果的“可观察数组”。

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

2 个答案: