ember-select-2 在对 Ajax 查询使用预先输入时出现问题
ember-select-2 issue while using type-ahead with Ajax Queries
我正在使用
ember-select-2 作为 ember 中的预输入 application.the 问题是我可以从服务器获取数据,但数据未显示在 dropdown.any 帮助中 appreciated.Thanks提前。
{{select-2
placeholder="Choose from our many pizzas"
value=chosenTypeaheadPizza
typeaheadSearchingText="Searching pizzas"
typeaheadNoMatchesText="No pizzas found for '%@'"
typeaheadErrorText="Loading failed: %@"
query="queryPizzas"
}}
并且操作处理程序是
queryPizzas(query) {
var self = this;
var store = self.get('store');
let adapter = store.adapterFor("pizzas");
let serachQuery = query.term;
adapter.searchPizza(serachQuery).then(function(response) {
console.log(response.pizzas);
});
},
回应
{
"pizzas": [{
"id": 1,
"name": "pizza 1"
}, {
"id": 2,
"name": "pizza 2"
}]
}
如果勾选ember-select-2的examples;您可以看到它正在使用传递给操作处理程序的 deferred
参数来显示数据。它说 "Make sure to not call query.callback directly but always use the provided deferred!"。这意味着,您需要调用 deferred
作为第二个参数提供给操作处理程序。我不是 ember-select-2 的专家,但你应该做的可能是
queryPizzas(query, deferred) {
var self = this;
var store = self.get('store');
let adapter = store.adapterFor("pizzas");
let searchQuery = query.term;
adapter.searchPizza(searchQuery).then(function(data) {
//try to pass the array as the data
deferred.resolve({data: data.pizzas, more: false});
}, deferred.reject);
}
上面提供的解决方案适用于您提供的数据格式。请勾选对应的twiddle。在这个例子中;我使用了一个mock promise来模拟服务器远程调用,并返回了您提供的示例数据作为要在select中显示的内容。您必须使用 optionLabelPath
才能在 select 中显示比萨饼的名称,如 application.hbs
.
中所示
我正在使用 ember-select-2 作为 ember 中的预输入 application.the 问题是我可以从服务器获取数据,但数据未显示在 dropdown.any 帮助中 appreciated.Thanks提前。
{{select-2
placeholder="Choose from our many pizzas"
value=chosenTypeaheadPizza
typeaheadSearchingText="Searching pizzas"
typeaheadNoMatchesText="No pizzas found for '%@'"
typeaheadErrorText="Loading failed: %@"
query="queryPizzas"
}}
并且操作处理程序是
queryPizzas(query) {
var self = this;
var store = self.get('store');
let adapter = store.adapterFor("pizzas");
let serachQuery = query.term;
adapter.searchPizza(serachQuery).then(function(response) {
console.log(response.pizzas);
});
},
回应
{
"pizzas": [{
"id": 1,
"name": "pizza 1"
}, {
"id": 2,
"name": "pizza 2"
}]
}
如果勾选ember-select-2的examples;您可以看到它正在使用传递给操作处理程序的 deferred
参数来显示数据。它说 "Make sure to not call query.callback directly but always use the provided deferred!"。这意味着,您需要调用 deferred
作为第二个参数提供给操作处理程序。我不是 ember-select-2 的专家,但你应该做的可能是
queryPizzas(query, deferred) {
var self = this;
var store = self.get('store');
let adapter = store.adapterFor("pizzas");
let searchQuery = query.term;
adapter.searchPizza(searchQuery).then(function(data) {
//try to pass the array as the data
deferred.resolve({data: data.pizzas, more: false});
}, deferred.reject);
}
上面提供的解决方案适用于您提供的数据格式。请勾选对应的twiddle。在这个例子中;我使用了一个mock promise来模拟服务器远程调用,并返回了您提供的示例数据作为要在select中显示的内容。您必须使用 optionLabelPath
才能在 select 中显示比萨饼的名称,如 application.hbs
.