knockoutjs模板jquery自動完成 - 如何填充自動完成選擇輸入？

我想在選擇自動完成項目後在模板中填充多個輸入。我正在關注http://jsfiddle.net/rniemeyer/MJQ6g/，但不知道如何將其應用於多個輸入。knockoutjs模板jquery自動完成 - 如何填充自動完成選擇輸入？

型號：

<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>

來源

2012-06-01 dm80

如果您從data-bind離開了jqAutoSourceValue選項，然後將設置爲等於值實際的對象。然後，您可以讀取該對象的屬性。

通常情況下，您將有一個可觀察值，如：mySelectedPerson，然後綁定一個部分（可能與with綁定），並從該對象訪問各個屬性/可觀察對象。

這裏是修飾以離開了jqAutoSourceValue選項，結合jqAutoValue對可觀察到的所謂mySelectedPerson並使用with結合以顯示來自所選擇的對象的屬性的一些樣品。 http://jsfiddle.net/rniemeyer/YHvyL/

來源

2012-06-03 16:31:28

謝謝RP。如果我使用模板，我將如何做到這一點？ – dm80

你的意思是說你想要爲數組中的每一行多次執行此操作，或者只是希望在模板中執行此操作？ –

是的我想爲數組中的每一行多次執行此操作。抱歉，我應該在http://jsfiddle.net/Km52a/3/之前完成此操作。在我的例子中，如果我在模板中使用「with」，它不會在jsfiddle中呈現。 – dm80

knockoutjs模板jquery自動完成 - 如何填充自動完成選擇輸入？

回答

相關問題