Question

这关于javascript淘汰赛

HTML

如果运行此行我得到[对象，对象]

 <p><select data-bind="options: availableRole"></select></p>

如果我运行此行，我什么也得不到

    <p><select data-bind="options: availableRoles, value: availableRoles().title, optionText: 'availableRoles().title'"></select></p>

JAVASCRIPT

    self.availableRoles = [

        { title: "Programmer" },
        { title: "Designer" }

    ];

我如何展示标题程序员和设计师？

Answer 1

您可以使用optionsText绑定绑定到子值，如documentation中所述：

<select data-bind="options: availableRoles, optionsText: 'title'"></select>

您可以看到working example here。

Answer 2

您应该在optionsText绑定中提供属性名称：

<select data-bind="options: availableRoles, optionText: 'title'"></select>

Answer 3

<select data-bind="options: availableRoles, optionsText: 'title', optionsCaption: 'Choose...'"></select>

有关详情，请参阅：The "options" binding

Answer 4

缺少所有这些答案的一件事是能够跟踪您在视图模型中选择的角色。为此，除value绑定外，还使用options绑定。

这是一个有效的jsfiddle：

这是为方便起见而粘贴的代码：

var viewModel = {
    availableRoles: [
        { title: "Programmer"},
        { title: "Designer" }
    ],
    selectedRole: ko.observable()
};
ko.applyBindings(viewModel);


<select data-bind="options: availableRoles, optionsText: 'title', optionsCaption: 'Select...', value: selectedRole"></select>
<pre data-bind="text: JSON.stringify(ko.toJS(selectedRole), null, 2)"></pre>

Answer 5

解决方案是：

 <select data-bind="options: availableRoles, optionsText: 'title'"></select>

数据绑定javascript淘汰赛

5 个答案: