3

有没有一种简单的方法来告诉敲除将下拉列表的选定值（不是 id、标签）绑定到另一个字段？我有一个中等复杂的用户界面，我想要一种简洁的方法，不仅可以在选项更改时将 id 和选项标签挂钩到字段。

就像是：

 <select data-bind="options: dropDownLists.Region,optionsText:'RegionName',optionsValue:'RegionId',value:regionFilterId,label:regionFilterName" >

标签绑定与值绑定执行相同的操作，但使用选项的标签。我怀疑我需要一个自定义绑定，但我想避免重新发明轮子。

4

3 回答 3

4

不确定我是否正确理解了您的要求，但如果您不关心 HTML，为什么不这样做：

<select data-bind="options: dropDownLists.Region,optionsText:'RegionName',value:regionFilter"></select>

未使用“optionsValue”绑定，因此“value”绑定仅使用 ID 更新 observable no，但使用完整对象。这使得编写两个计算的 observable 变得容易，它们返回所选区域的 ID 和名称：

self.regionFilter = ko.observable();

self.regionFilterId = ko.computed(function() {
    var region = self.regionFilter();
    if (region) return region.RegionId;
});

self.regionFilterName = ko.computed(function() {
    var region = self.regionFilter();
    if (region) return region.RegionName;
});

http://jsfiddle.net/VA7aF/

于 2012-06-08T13:26:40.553 回答
1

或者，您可以使用订阅：

self.regionFilter = ko.observable();
self.regionFilterId  = ko.observable();
self.regionFilterName = ko.observable();

self.regionFilter.subscribe(function(region) {
    self.regionFilterId(region.RegionId());
    self.regionFilterId(region.RegionName());
});
于 2013-11-12T12:10:30.690 回答
0

上面建议的方法会让我为模型中的每个 ID/Name 对创建一个计算值。

我写了一个自定义绑定，支持这一点。所以现在，我可以传入我的对象并获取“名称”字段。

希望这可以帮助：

HTML 绑定：

<span>Agency: </span><span data-bind="keyvalue:Agency,data:'Name'"></span>

HTML 选择：

<select id="selectAgency" data-bind="options: $root.agencies,optionsText: 'Name',optionsValue: function(item){return item;}, optionsCaption: 'Agency', value: Agency"></select>

JavaScript

ko.bindingHandlers.keyvalue = {
    update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var value = valueAccessor();
        var allBindings = allBindingsAccessor();
        var field = allBindings.data;
        if (value() !== undefined) {
            $(element).text(value()[field]);
        }
    }
};
于 2015-01-21T19:53:22.587 回答