jquery オートコンプリート機能を使用していくつかの可能な値を選択すると、knockoutjs によって生成されたリストを更新しようとしています。しかし、Select メソッド内で addItem 関数を呼び出すと、リストは更新されません。期待される動作は、選択された項目の値が knockoutjs の項目配列に追加されることです。
MVC3 サンプル ビュー:
<input type="text" id="Name"/>
<h4>Items</h4>
<ul data-bind="foreach: items">
<li>
<span data-bind="text: $index"></span>:
<span data-bind="text: name"></span>
<span data-bind="text: code"></span>
<a href="#" data-bind="click: $parent.removeItem">Remove</a>
</li>
</ul>
<script type="text/javascript">
$(function () {
var appViewModel = new AppViewModel();
function AppViewModel() {
var self = this;
self.items = ko.observableArray([]);
self.addItem = function (name, code) {
self.items.push({ name: name, code: code });
};
self.removeItem = function () {
self.items.remove(this);
};
}
$('#Name').autocomplete({
minLength: 1,
delay: 500,
source: function (request, response) {
$.ajax({
type: "POST",
url: "/Home/SearchItems",
dataType: "json",
data: { searchText: request.term },
success: function (data) {
if (data != undefined) {
response($.map(data, function (item) {
return {
label: item.Name,
value: item.Name,
code: item.Code
};
}));
}
}
});
},
select: function (event, ui) {
appViewModel.addItem(ui.item.value, ui.item.code);
}
});
ko.applyBindings(new AppViewModel());
});
</script>