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
、誰もがこれを解決することができますか?
ko.mapping plugin(http://knockoutjs.com/documentation/plugins-mapping.html)を使用すると、オブジェクト構造を観察可能にすることができます。 – TSV
ko.observableでko.mappingの結果が意味をなさないので正しく理解しているかどうかわかりませんが、何か不足していますか? – Flaminio
これにより、子プロパティが監視可能になり、モデルの変更がすぐにUIに反映されます。 – TSV