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自动完成 - 如何填充自动完成选择输入？

回答

相关问题