KnockoutJS 选择查找

Question

我正在尝试将带有 KnockoutJS 的选择绑定到来自我的模型的预定义值。根据文档，这应该来自 value 属性，但我无法基于此在下拉列表中预先选择一个值。这是反映我遇到的问题的示例代码：

<script src="Scripts/jquery-1.7.1.js"></script>
<script src="Scripts/knockout-2.0.0.js"></script>

<script>
    $(function () {

        var viewModel =
        {
            Positions: ko.observableArray(
                                            [
                                                { Id: 1, PositionName: 'Point Guard' },
                                                { Id: 2, PositionName: 'Shooting Guard' },
                                                { Id: 3, PositionName: 'Center' },
                                                { Id: 4, PositionName: 'Small Forward' },
                                                { Id: 5, PositionName: 'Power Forward' }
                                            ]),
            Players: ko.observableArray(
                                            [
                                                { Id: 1, Name: 'Derrick Fisher', Position: 'Point Guard' },
                                                { Id: 2, Name: 'Kobe Bryant', Position: 'Shooting Guard' },
                                                { Id: 3, Name: 'Andrew Bynum', Position: 'Center' },
                                                { Id: 4, Name: 'Metta World Peace', Position: 'Small Forward' },
                                                { Id: 5, Name: 'Pau Gasol', Position: 'Power Forward' }
                                            ])
        };

        ko.applyBindings(viewModel);

    });
</script>

在我的绑定中，我想使用一个简单的表格，其中第一列预先选择了查找值，在这种情况下，默认情况下是播放器的“位置”。这是一个例子：

<table>
    <thead>
        <tr>
            <td>Position</td>
            <td>Player</td>
        </tr>
    </thead>
    <tbody data-bind='foreach: Players'>
        <tr>
            <td>
                <select data-bind="options: $root.Positions, optionsText:'PositionName', 
                                value:'$data.Position', optionsCaption: 'Choose...'">
                </select>
            </td>
            <td>
                <span data-bind='text: Name'></span>                                
            </td>
        </tr>
    </tbody>
</table>

查找似乎绑定好了（选择填充了查找中的所有位置值）但是默认情况下未选择给定玩家的位置。谁能发现我在哪里做出了错误的假设或错误？

Answer 1

当你不使用optionsValue时，它会将选中的对象写入你绑定到value的对象中。

如果您的player 具有position 对象的单独副本，则它不会匹配。

例如，

var a = { Id: 3, Name: 'Andrew Bynum', Position: 'Center' };
var b = { Id: 3, Name: 'Andrew Bynum', Position: 'Center' };

alert(a === b); //false they are not a reference to the same object

因此，您的玩家要么需要使用对同一对象的引用，要么您应该指定 optionsValue 与 Id 绑定，以便它读取/写入 Id 到玩家的位置属性。

Answer 2

您还没有显示 $data.Position 的来源。
您可能还需要设置 optionsValue，http://knockoutjs.com/documentation/options-binding.html

它允许你将值绑定到属性而不是 JS 对象。