Question

我在使用ko viewmodel的某些子属性时遇到了一些麻烦。使用自动完成功能无法观察子属性，因此在添加一些新的（在此示例中）phonenumbers后，UI /视图不会更新。对于自动完成功能，我使用rniemeyer的knockout-jqAutocomplete。

查看

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

JS

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

有任何解决此问题的建议吗？

感谢。

亲切的问候，

弗拉米尼奥

更新

我创造了一个 fiddle对于这个问题，任何人都可以解决这个问题吗？

Answer 1

如果您唯一可观察到的是selectedCustomer，也许最简单的方法就是致电

$self.selectedCustomer.valueHasMutated();

每当您对PhoneNumbers进行更改时。

在ViewModel中可以观察到的子节点

1 个答案: