0

我在遍历购物车对象列表时使用了淘汰赛模板。在模板中，我使用名称作为选项文本和选项值填充所有产品的下拉列表。我想要一个相应的文本区域来填充产品描述，它是下拉列表绑定到的对象上的一个属性。有没有一种淘汰方式可以做到这一点，还是我需要使用 jQuery？谢谢您的帮助。

<script type="text/html" id="edit-template">
    <div class="row edit">
        <div class="span3">
            <select data-bind=" options: $root.products, optionsText: 'Name', optionsValue: 'Name', value: Name, optionsCaption: 'Select a Product'"></select>
        </div>
        <div class="span4">
            <!-- This is where I'm not sure what I need to do for this text area -->
            <textarea class="span4" rows="3" data-bind="value: Description"></textarea>
        </div>
        <div class="span1">
            <button class="btn btn-primary" style="margin-top:20px;" data-bind="click: $root.save">Save</button>
        </div>
    </div>
</script>

更新 这是一个小提琴。在这种情况下，我希望看到使用名称更新的文本框和使用描述更新的文本区域。如此全面披露，我的应用程序实际上与购物车无关，但我试图将这个 SO 问题简化为购物车示例，以便读者不必了解应用程序的业务领域知识。

更新 2 对小提琴进行了微小的改动

4

1 回答 1

2

这应该可以解决问题：http: //jsfiddle.net/trr5e/3/

确保您有一个ko.observable可以容纳所选项目并将其连接到选择元素的内容：

<select data-bind="options: $root.products, optionsText: 'Name', value: selectedProduct, optionsCaption: 'Select a Product'"></select>

比您可以在其他控件中使用所选项目的属性：

<input type="text" data-bind="value: selectedProduct() ? selectedProduct().Name : ''"/>
于 2013-07-08T20:14:29.740 回答