在ViewModel中可观察的子项

我对ko viewmodel的某些子属性有些问题。使用自动完成功能无法观察子属性，因此在添加一些新的（本例中）电话号码后，UI /视图不会更新。对于自动完成功能，我使用rniemeyer的knockout-jqAutocomplete。在ViewModel中可观察的子项

查看

<input data-bind="jqAuto: { source: searchCustomer, value: selectedCustomer, inputProp: 'Name', labelProp: 'Name', options: { delay: 250 } }" id="Customer_Name" name="Customer.Name" type="text" value=""> 

<div class="phone-list" data-bind="visible: selectedCustomer().PhoneNumbers.length > 0, foreach: selectedCustomer().PhoneNumbers"> 
    <input type="hidden" data-bind='attr: { name: "Customer.PhoneNumbers["+$index()+"].Id", value: Id}' /> 
    <input type="text" data-bind='attr: { name: "Customer.PhoneNumbers["+$index()+"].Number", value: Number}' /> 
</div>

function ViewModel(addressUrl) { 
    var $self = this; 

    $self.selectedCustomer = ko.observable(), 

    $self.searchCustomer = function (searchTerm, callback) { 
     $.ajax({ 
      url: '/customers/search/?query=' + encodeURIComponent(searchTerm), 
       cache: true, 
       dataType: "json" 
     }).done(callback); 
    } 

      $self.addPhoneNumber = function() { 
       $self.selectedCustomer().PhoneNumbers.push({ Id: 0, Number: '' }); 
      } 

      $self.removePhoneNumber = function (phoneNumber) { 
       $self.selectedCustomer().PhoneNumbers.remove(phoneNumber); 
      } 
}; 

var viewModel = new ViewModel(); 
ko.applyBindings(viewModel);

JSON数据（结果）

{ 
    "Id":1, 
    "Name":"Test customer", 
    "PhoneNumbers":[ 
     { 
     "Number":"123456789", 
     "CreatedOnUtc":"/Date(1474299252213)/", 
     "Id":1 
     } 
    ] 
}

任何建议，以解决这个？

谢谢。

亲切的问候，

弗拉米尼奥

UPDATE

我创建了一个 fiddle这件事情，任何人都可以解决了吗？

来源

2016-09-26 Flaminio

您可以使用ko.mapping插件（http://knockoutjs.com/documentation/plugins-mapping.html）使对象结构可观察。 – TSV

我不知道我是否正确理解你，因为它对ko.observable中的ko.mapping结果没有任何意义，或者我错过了什么？ – Flaminio

这使得子属性可观察，因此模型更改将立即反映在UI中。 – TSV

如果你拥有的唯一可观察到的是selectedCustomer，也许最容易做的事情就是打电话给

$self.selectedCustomer.valueHasMutated();

每当你做出改变，以PhoneNumbers。

来源

2016-09-26 23:44:59

在ViewModel中可观察的子项

回答

相关问题