0

クリックしたときに「selectedItem」を設定する簡単なテンプレートを作成します。「selectedItem」メソッドにバインドする単純なテキスト ボックスも追加しましたが、テンプレート リストをクリックしても更新されません。

HTML

<div data-bind="template: { name: 'address-template', foreach: addresses }"></div>

<input type="text" id="textBoxAddressLine1" name="textBoxAddressLine1Name" data-bind="value: selectedItem ? selectedItem.AddressLine1 : ''" />

<script type="text/html" id="address-template">
    <a href="#" data-bind="click: function() { viewModel.selectItem($data); }">
        <h4 >Suggested Address</h4>
        <p>
            <dl>
                <dt>Address line 1:</dt>
                <dd data-bind="text: AddressLine1"></dd>
                <dt>Address line 2:</dt>
                <dd data-bind="text: AddressLine2"></dd>
            </dl>
        </p>
    </a>
</script>

JS

viewModel = {
                addresses: ko.observableArray(),
                selectedItem: ko.observable(),
                selectItem: function (data) {
                    this.selectedItem = data;
                }
            };
viewModel.addresses = [{"AddressSuggestionId":"895528b3-b5a3-4dc8-966c-094ef74d88d2","AddressLine1":"111 Test street","AddressLine2":"Test address line 2"},{"AddressSuggestionId":"d149b694-6450-4d86-a441-1f41cee732dd","AddressLine1":"222 test street","AddressLine2":"test addresline2"}]

ko.applyBindings(viewModel);

テスト コードを見てみましょう: http://jsfiddle.net/patremb/7meN8/6/

ご協力ありがとうございました！

パトリック

4

1 に答える 1