Question

如何使用Knockout中的options绑定和一个对象数组生成一个具有value属性的选项列表，可以像表单中的普通选择列表一样使用？< / p>

一些示例数据......

[
    { "Id": "0", "Title": "Red", "Desc": "Some text.." },
    { "Id": "1", "Title": "Green", "Desc": "Other text.." },
    { "Id": "2", "Title": "Blue", "Desc": "More text.." }
]

所需的输出看起来像这样......

<select name="color">
    <option value="0">Red</option>
    <option value="1">Green</option>
    <option value="2">Blue</option>
</select>

如下所示，在我的Fiddle中，我还希望在单独的区域中显示说明。看起来这一切都应该很容易实现，但我无法弄清楚如何将ID值添加到选项的value属性中。

我的HTML ...

<select data-bind="options: colors,
                   optionsCaption: 'Choose...',
                   optionsValue: 'Title',
                   value: selectedColor"></select>

<hr>

<h3>Description</h3>
<div data-bind="text: selectedColor()"></div>

我的JavaScript ......

function ViewModel() {
    var self = this;

    self.selectedColor = ko.observable();

    self.colors = ko.observableArray([
        { "Id": "0", "Title": "Red", "Desc": "Some text.." },
        { "Id": "1", "Title": "Green", "Desc": "Other text.." },
        { "Id": "2", "Title": "Blue", "Desc": "More text.." }
    ]);
};

ko.applyBindings(new ViewModel());

我尝试过像......

self.description = ko.observable(self.selectedColor().Desc);

......但无济于事。

Answer 1

您需要在select上将数据绑定从optionsValue更改为optionsText。然后selectedColor的值将是整个对象。在您的div中，您将数据绑定到selectedColor().Desc

<select data-bind="options: colors,
                   optionsCaption: 'Choose...',
                   optionsText: 'Title',
                   value: selectedColor"></select>

<hr>

<h3>Description</h3>
<div data-bind="text: selectedColor().Desc"></div>

现在，如果您绝对需要select将值作为ID，则可以使用一个属性来保存ID，并使用另一个计算属性来获取所选颜色对象。就像在这个更新的小提琴：http://jsfiddle.net/9wZFk/

请注意，我也改变了一些绑定。

基本上重命名了您现有的属性并添加了另一个：

self.selectedColorId = ko.observable();
self.selectedColor = ko.computed(function () {
    return self.colors()[self.selectedColorId()];
});

如何使用Knockout中的值创建一个选择列表

1 个答案: