Question

我正在尝试使用手动选择值绑定来获取已选择对象的id，但我发现除非给定显式值，否则它不会填充。这是一个例子：

<div id="container">
<select data-bind="value: selectedOption">
    <!-- notice the explicit value of 0 given below... why is that necessary to get selectedOption to be populated when bound? -->
    <option value="0" data-bind="value: initialSelectedOptionId, text: 'initially selected option'"></option>
    <!-- ko foreach: options -->
    <option data-bind="value: id, text: name"></option>
    <!-- /ko -->
</select>
<span data-bind="text: selectedOption"></span>

var viewModel = {
    options: ko.observableArray([
        {id: 1, name: 'first option'},
        {id: 2, name: 'second option'},
        {id: 3, name: 'third option'},
        {id: 4, name: 'fourth option'}
    ]),
    selectedOption: ko.observable(),
    initialSelectedOptionId: ko.observable(3)
};
ko.applyBindings(viewModel, document.getElementById('container'));
//uncommenting the following line will initially select the correct option
//viewModel.selectedOption(viewModel.initialSelectedOptionId());

Here是显示问题的jsfiddle。请注意，selectedOption属性在显式时填充，但在使用绑定完成时则不会填充。这种行为是个错误吗？如果没有，这个决定背后的原因是什么？

Answer 1

这是否符合您的预期？

<div id="container">
<select data-bind="value: selectedOption">
    <!-- notice the explicit value of 0 given below... why is that necessary to get selectedOption to be populated when bound? -->
    <option data-bind="value: initialSelectedOptionId, text: 'initially selected option'"></option>
    <!-- ko foreach: options -->
    <option data-bind="value: id, text: name"></option>
    <!-- /ko -->
</select>
<span data-bind="text: selectedOption"></span>

var viewModel = {
options: ko.observableArray([
    {id: 1, name: 'first option'},
    {id: 2, name: 'second option'},
    {id: 3, name: 'third option'},
    {id: 4, name: 'fourth option'}
]),
selectedOption: ko.observable(3),
initialSelectedOptionId: ko.observable(0)};

ko.applyBindings(viewModel, document.getElementById('container'));
//uncommenting the following line will initially select the correct option
viewModel.selectedOption(3);

Fiddle here to see it working。

我认为在应用绑定后没有设置selectedOption这是不行的原因是因为绑定发生的顺序。首先绑定<select data-bind="value: selectedOption">，并且由于没有绑定选项，KO无法正确应用此绑定。

我跟踪了selectedOption的值，发现在应用绑定后直接将其设置为空字符串。我猜测当它将绑定应用到DOM时，KO然后更新了这个值（通过双向绑定）以匹配下拉列表的“选定值”（因为在该阶段没有绑定任何项目）。从那时起（直到你修改它为止）所有对selectedOption的绑定都将显示为空白。

有意义吗？

Answer 2

您需要将选择框的布局更像这样：

<div id="container">
<select data-bind="options: options, value: selectedOption">


</select>
<span data-bind="text: selectedOption"></span>

然后，对于你的JS，你只需要这样做：

var viewModel = {
    options: ko.observableArray([
        {id: 1, name: 'first option'},
        {id: 2, name: 'second option'},
        {id: 3, name: 'third option'},
        {id: 4, name: 'fourth option'}
    ]),
    selectedOption: ko.observable(3),
};
ko.applyBindings(viewModel, document.getElementById('container'));

希望有帮助，此链接也可能对您有所帮助：http://knockoutjs.com/documentation/options-binding.html

Answer 3

我更新了一个清洁代码的小提琴答案之一。我认为不需要在选项标签中使用foreach

<div id="container">
<select data-bind="value: selectedOption, options: options, optionsText: 'name'">
</select>
<span data-bind="text: selectedOption().name"></span>

它还为select标签

使用了options和optionsText

http://jsfiddle.net/62zrzmLe/

选择值绑定默认情况下不填充，没有显式值

3 个答案: