2016-09-26 13 views
0

私はkoビューモデルのいくつかの子プロパティにいくつかの問題があります。子プロパティはオートコンプリートでは観測できないため、いくつかの新しい(この例では)電話番号を追加した後に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> 

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を作成したUPDATE

、誰もがこれを解決することができますか?

+0

ko.mapping plugin(http://knockoutjs.com/documentation/plugins-mapping.html)を使用すると、オブジェクト構造を観察可能にすることができます。 – TSV

+0

ko.observableでko.mappingの結果が意味をなさないので正しく理解しているかどうかわかりませんが、何か不足していますか? – Flaminio

+0

これにより、子プロパティが監視可能になり、モデルの変更がすぐにUIに反映されます。 – TSV

答えて

0

あなたが持っている唯一の観察可能な場合には、多分一番簡単な方法は、あなたがPhoneNumbersに変更を加えるたび

$self.selectedCustomer.valueHasMutated(); 

を呼び出すことで、selectedCustomerです。

関連する問題