Question

我使用Knockout 2.2.1将对象绑定到下拉列表。绑定正在将正确的项目放在列表中，但是当我尝试选择OBJECT时，它无法正常工作。我有一个JSFiddle显示这个问题; http://jsfiddle.net/CTBSTerry/g4Gex/

Html
<div style="margin-bottom: 15px;">
   Your Choices: 
   <select data-bind="options: choicelists[0].options, optionsText: 'otext', optionsValue: 'oprice', value: selOpt1, optionsCaption: 'Choose...'"></select>
</div>
<div data-bind="visible: selOpt1" style="margin-bottom: 15px;"> <!-- Appears when you select something -->
    You have chosen<br> 
    From Object:&nbsp;
    <span data-bind="text: selOpt1() ? selOpt1().otext : 'unknown'"></span>
    <br>From Value:&nbsp;
    <span data-bind="text: selOpt1() ? selOpt1() : 'unknown'"></span>
</div>
 JavaScript:
var mychoice = function (txt, price) {
        this.otext = txt;
        this.oprice = price;
    }
    var viewModel = {
        prodphoto: "",
        prodname: "",
        prodDesc: "",
        baseprice: "",
        choicelists: [
        { 'listlabel': 'Size List',
            'options': ko.observableArray([
            new mychoice('Small', 'Small|$|0.00'),
            new mychoice('Medium', 'Medium|$|0.00'),
            new mychoice('Large', 'Large|$|0.00'),
            new mychoice('X Large + 2.00', 'X Large|$|2.00'),
            ])
        }],
        textlists: [],
        selOpt1: ko.observable()
    }


    ko.applyBindings(viewModel);

当您单击下拉列表进行选择时，我有2个跨度，尝试显示我想要的所选值，而不仅仅是特定值字段。对象表示法返回任何内容，但不会返回错误。第二个跨度显示所选的值，但由于它不是所选对象，因此我必须遍历该对象以获取相关对象。 Knockout文档显示了一个非常相似的示例，但我需要更复杂的视图模型。有人可以帮助我，并指出为什么这不起作用？

谢谢，特里

Answer 1

如果从绑定中删除optionsValue，则Knockout将使用实际对象而不是其上的属性。

因此，您希望从绑定中删除optionsValue: 'oprice'，然后将使用实际对象填充selOpt1。

示例：http://jsfiddle.net/rniemeyer/g4Gex/1/

下拉列表绑定到未返回所选对象的对象

1 个答案: