javascript - 数据绑定javascript淘汰赛

Question

这关于 javascript 淘汰赛

HTML

如果运行这一行，我会得到 [Object, object]

 <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绑定来绑定到文档中描述的子值：

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

您可以在此处查看一个工作示例。

Answer 2

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

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

Answer 3

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

有关这方面的更多信息，请参阅：“选项”绑定

Answer 4

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

这是一个有效的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>

​</p>

Answer 5

解决方案是：

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