1

オートコンプリートアイテムを選択した後、テンプレート内に複数の入力を入力したいと思います。http://jsfiddle.net/rniemeyer/MJQ6g/をフォローしていますが、これを複数の入力に適用する方法がわかりません。

モデル：

<script>
        var ContactModel = function (contactsInfo) {
            var self = this;
            self.Company = ko.observable();
            self.ContactsInformation = contactsInfo;
            self.Name = ko.observable();
        };

        var ContactsInformationModel = function () {
            var self = this;
            self.Address1 = ko.observable();
        };

     var viewModel;

     var ViewModel = function () {
         var self = this;
         self.Contact1 = new ContactModel(new ContactsInformation);
         self.Contact2 = new ContactModel(new ContactsInformation);
     };

     $(function () {
         viewModel = new ViewModel();
         ko.applyBindings(viewModel);
     });

    function getContacts(searchTerm, sourceArray) {
        $.getJSON("web_service_uri" + searchTerm, function (data) {
            var mapped = $.map(data, function (item) {
                return {
                    label: item.Name,
                    value: item
                };
            });
            return sourceArray(mapped);
        });
    }
</script>

レンプレート：

<script type="text/html" id="contact-template">                 
     <div>   
            Name
              <input data-bind="uniqueName: true,
                jqAuto: { autoFocus: true, html: true }, 
                jqAutoSource: $root.Contacts, 
                jqAutoQuery: getContacts, 
                jqAutoValue: Name, 
                jqAutoSourceLabel: 'label', 
                jqAutoSourceInputValue: 'value', 
                jqAutoSourceValue: 'label'"
                class="name" />    
     </div>
    <div>
        Company
        <input data-bind="value: Company, uniqueName: true" class="company" />
    </div>
    <div>
        Address
        <input data-bind="value: ContactsInformation.Address1, uniqueName: true" class="address1" />
    </div>        
</script>

HTML：

<div data-bind="template: { name: 'contact-template', data: Contact1 }">
        </div>
<hr/>
        <div data-bind="template: { name: 'contact-template', data: Contact2 }">
        </div>
4

1 に答える 1

2

のjqAutoSourceValueオプションをdata-bind省略すると、実際のオブジェクトと同じ値が設定されます。次に、そのオブジェクトからプロパティを読み取ることができます。

通常、次のようなオブザーバブルがあります。mySelectedPerson次に、セクションを（場合によってはwithバインディングを使用して）バインドし、そのオブジェクトから個々のプロパティ/オブザーバブルにアクセスします。

jqAutoSourceValueこれは、オプションを省略jqAutoValueし、呼び出されたオブザーバブルに対してバインドし、バインドmySelectedPersonを使用withして選択したオブジェクトのいくつかのプロパティを表示する ように変更されたサンプルです。http://jsfiddle.net/rniemeyer/YHvyL/

于 2012-06-03T16:31:28.860 に答える