Question

我在迭代购物车对象列表时使用了淘汰模板。在模板中，我使用Name作为选项文本和选项值填充所有产品的下拉列表。我想要一个相应的文本区域填充产品描述，该产品描述是下拉列表绑定的对象的属性。是否有淘汰方式这样做或我需要使用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>

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

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

Answer 1

这应该可以解决问题：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 : ''"/>

使用knockoutjs从模板中的下拉列表中使用所选项目更新textarea

1 个答案: