Question

有没有一种简单的方法可以告诉knockout将下拉列表（不是id，标签）的选定值绑定到另一个字段？我有一个中等复杂的用户界面，我想要一个干净的方法，不仅可以将id转换为选项的标签，还可以在更改时将其粘贴到字段中。

类似的东西：

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

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

Answer 1

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

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

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

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/

Answer 2

或者你可以使用subscribe：

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());
});

Answer 3

上面建议的方法是让我为模型中的每个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]);
        }
    }
};

如何将文本标签绑定到knockout中下拉列表的选定选项值？

3 个答案: