我编写了以下自定义绑定(bind)处理程序，它显示了 jquery-ui 自动完成列表。选择元素后，我想更改由 options.value 给出的给定可观察值，但当 select 函数输入时没有任何变化。
ko.bindingHandlers.autocomplete = {
init : function(element, valueAccessor, allBindings, viewModel, bindingContext) {
var options = ko.unwrap(valueAccessor());
$(element).autocomplete(
{
minLength : 2,
autoFocus : true,
source : function(request, response) {
$.ajax({
url : options.source,
data : {
term : request.term
},
dataType : "json",
type : "GET",
success : function(data) {
response(data);
}
});
},
select : function(event, ui) {
var selectedItem = ui.item;
options.value(selectedItem.name);
}
});
}
};
<input data-bind="autocomplete: {
value: myView().parent_name,
source: '/data/autocomplete'
}"
type="text" class="form-control">
编辑 1
我尝试了评论中的绑定(bind)，但仍然有问题。
model.autocomplete = function(searchTerm, callback){
$.ajax({
type : "GET",
url : "/data/autocomplete",
data: {term: searchTerm}
}).done(callback);
};
输入如下所示:
<input data-bind="jqAuto: {
value: myView().parent_name,
source: myView().autocomplete,
labelProp: 'name',
valueProp: 'parent_name'
}"
type="text" class="form-control">
这不会改变 myView().parent_name
编辑2
我想我现在知道问题是什么了。我制作了一个更简单的测试文件，如下所示:
<!DOCTYPE html>
<html>
<body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script>
<script src="https://rawgit.com/rniemeyer/knockout-jqAutocomplete/master/build/knockout-jqAutocomplete.js"></script>
<h1>Testpage</h1>
<input data-bind="jqAuto : {
source: sub().autocomplete,
value: sub().id,
labelProp: 'name',
valueProp: 'id'
}"></input>
<button data-bind="click: sub().output">ok</button>
<button data-bind="click: reset">reset</button>
<script>
function getData() {
var data = [
{
name: "Test1",
id: 1
},
{
name: "Test2",
id: 2
},{
name: "Test3",
id: 3
}
];
return data;
}
function Submodel() {
var self = this;
self.name = ko.observable("");
self.id = ko.observable(null);
self.autocomplete = function(searchTerm, callback) {
callback(getData());
};
self.output = function(){
alert(self.id());
};
}
function PageModel() {
var self = this;
self.sub = ko.observable(new Submodel());
self.reset = function(){
self.sub(new Submodel());
};
}
ko.applyBindings(new PageModel());
</script>
</body>
</html>
有一个子模型在某个时候被清除，但这似乎使绑定(bind)无效。直到我按下重置按钮为止，一切正常。有什么解决方案可以在重置后更新绑定(bind)吗？我需要此重置，因为我想在模型中使用对话框，而不使用对话框绑定(bind)，也不想手动清理每个变量。
最佳答案
根据您提供的(最小)代码以及您在评论中对我的问题的回答，我可能可以通过展示一个工作示例来提供帮助。
最重要的要点:
- 您必须仔细阅读
valueProp、inputProp和labelProp之间的差异:它们用于定义您想要的< em>存储在 View 模型中与您想要向用户显示的内容。 - 确保您的
自动完成方法返回的数据具有您指定的属性
尝试示例的注意事项:
- 我没有包含 css，所以很难看
- 我使用了字符串
"one"到"ten"作为示例数据。输入o或e或这些单词中使用的任何其他字母即可开始。
var Model = function() {
return {
parent_name: ko.observable(null),
autocomplete: function(searchTerm, callback) {
setTimeout(function() {
callback(getData().filter(function(v) {
return v.name.includes(searchTerm.toLowerCase())
}));
}, 200);
}
};
};
var vm = {
myView: ko.observable(new Model()),
reset: () => vm.myView(new Model())
};
ko.applyBindings(vm);
function getData() {
return ["one", "two", "three", "four",
"five", "six", "seven", "eight",
"nine", "ten"]
.map(str => ({ name: str }));
};<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script
src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://rawgithub.com/rniemeyer/knockout-jqAutocomplete/master/build/knockout-jqAutocomplete.js"></script>
<p>
<code>parent_name</code>’s value is:
<strong>
<code data-bind="text: JSON.stringify(myView().parent_name())"></code>
</strong>
</p>
<!-- ko with: myView -->
<input data-bind="jqAuto: {
value: parent_name,
source: autocomplete,
labelProp: 'name',
valueProp: 'name'
}" type="text" class="form-control">
<!-- /ko -->
<button data-bind="click: reset">reset</button>关于javascript - 更改自定义处理程序内可观察的模型，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41593362/