[英]Knockout.js JqueryUI Autocomplete Binding - Return the Object instead of the value
我正在使用一個不錯的自定義綁定來填充JQueryUI自動完成,但是我想對其進行自定義以返回Item對象,然后可以將其推入另一個數組。 誰能闡明如何做到這一點? 謝謝!
http://jsfiddle.net/rniemeyer/kEdT5/
<input data-bind="jqAuto: { autoFocus: true }, jqAutoSource: myOptions, jqAutoValue: mySelectedOption, jqAutoSourceLabel: 'name', jqAutoSourceValue: 'id'" />
<hr/>
<div data-bind="text: ko.toJSON(mySelectedOption)"></div>
//jqAuto -- additional options to pass to autocomplete
//jqAutoSource -- the array of choices
//jqAutoValue -- where to write the selected value
//jqAutoSourceLabel -- the property name that should be displayed in the possible choices
//jqAutoSourceValue -- the property name to use for the value
ko.bindingHandlers.jqAuto = {
init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
var options = valueAccessor() || {};
var allBindings = allBindingsAccessor();
var unwrap = ko.utils.unwrapObservable;
//handle value changing
var modelValue = allBindings.jqAutoValue;
if (modelValue) {
var handleValueChange = function(event, ui) {
var valueToWrite = ui.item ? ui.item.value : $(element).val();
if (ko.isWriteableObservable(modelValue)) {
modelValue(valueToWrite );
} else { //write to non-observable
if (allBindings['_ko_property_writers'] && allBindings['_ko_property_writers']['jqAutoValue'])
allBindings['_ko_property_writers']['jqAutoValue'](valueToWrite );
}
};
options.change = handleValueChange;
options.select = handleValueChange;
}
//handle the choices being updated in a DO, so the update function doesn't have to do it each time the value is updated
var mappedSource = ko.dependentObservable(function() {
var source = unwrap(allBindings.jqAutoSource);
var valueProp = unwrap(allBindings.jqAutoSourceValue);
var labelProp = unwrap(allBindings.jqAutoSourceLabel) || valueProp;
var mapped = ko.utils.arrayMap(source, function(item) {
var result = {};
result.label = labelProp ? unwrap(item[labelProp]) : unwrap(item).toString(); //show in pop-up choices
result.value = valueProp ? unwrap(item[valueProp]) : unwrap(item).toString(); //value
return result;
});
return mapped;
});
mappedSource.subscribe(function(newValue) {
$(element).autocomplete("option", "source", newValue);
});
options.source = mappedSource();
$(element).autocomplete(options);
},
update: function(element, valueAccessor, allBindingsAccessor, viewModel) {
//update value based on a model change
var allBindings = allBindingsAccessor();
var modelValue = allBindings.jqAutoValue;
if (modelValue) {
$(element).val(ko.utils.unwrapObservable(modelValue));
}
}
};
function Item(id, name) {
return {
id: ko.observable(id),
name: ko.observable(name)
};
}
var viewModel = {
myOptions: ko.observableArray([
new Item("One", "1 - One description"),
new Item("Two", "2 - Two description"),
new Item("Three", "3- Three description"),
new Item("Four", "4- Four description"),
new Item("Five", "5- Five description")
]),
mySelectedOption: ko.observable()
};
ko.applyBindings(viewModel);
您可以向jQuery UI自動完成功能的選擇功能添加一些邏輯。 放置在綁定處理程序內:
if (modelValue) {
var handleValueChange = function(event, ui) {
...
}
我對您的示例進行了一些更改。 我希望這不是完美的,但可以作為一個起點。 http://jsfiddle.net/dima_k/kEdT5/37/
這篇文章中提供了該自動完成綁定的更新版本: 如何創建自動完成組合框? 。 它將輸入框中顯示的值與寫入的值分開。 如果關閉jqAutoSourceValue
,則它將寫入整個對象。
這是一個示例: http : //jsfiddle.net/rniemeyer/3vqpP/
您可以添加一個小的超時來解決該問題:
...
select: function (event, ui) {
var selectedItem = ui.item;
window.setTimeout(function () {
$(element).val(selectedItem.koObservableValue);
}, 10);
}
如果這是一個簡單的值
...
select: function (event, ui) {
var selectedItem = ui.item;
window.setTimeout(function () {
$(element).val(selectedItem);
}, 10);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.