我正在使用 ember-select-2作为 ember 应用程序中的预输入。问题是我可以从服务器获取数据,但数据没有显示在下拉列表中。任何帮助将不胜感激。提前致谢。
{{select-2
placeholder="Choose from our many pizzas"
value=chosenTypeaheadPizza
typeaheadSearchingText="Searching pizzas"
typeaheadNoMatchesText="No pizzas found for '%@'"
typeaheadErrorText="Loading failed: %@"
query="queryPizzas"
}}
Action 处理程序是
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"
}]
}
最佳答案
如果您检查examples ember-select-2;您可以看到它使用传递给操作处理程序的 deferred
参数来显示数据。它说“确保不要直接调用query.callback,但始终使用提供的延迟!”。这意味着,您需要调用将作为第二个参数提供给操作处理程序的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 。在这个例子中;我使用了模拟 promise 来模拟服务器远程调用,并返回您提供的示例数据作为要在 select 中显示的内容。您必须使用 optionLabelPath
才能在选择中显示比萨饼的名称,如 application.hbs
中所示。
关于javascript - 在 Ajax 查询中使用预输入时出现 ember-select-2 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42833778/