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>

查找似乎绑定正常（select中填充了查找中的所有位置值）但是默认情况下未选择给定玩家的位置。任何人都可以找到我做出错误假设或错误的地方吗？

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读取/写入播放器的位置属性。 / p>

Answer 2

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

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

KnockoutJS选择查找

2 个答案: