在 Ajax 查询中使用预先输入时的 ember-select-2 问题 [英] ember-select-2 issue while using type-ahead with Ajax Queries

问题描述

我正在使用ember-select-2 作为 ember 应用程序中的提前输入.问题我可以从服务器获取数据，但数据没有显示在下拉列表中.任何帮助将不胜感激.提前致谢.

I'm using ember-select-2 as a typeahead in ember application.the problem is i can fetch the data from the server but the data isn't showing in dropdown.any help would be appreciated.Thanks in advance.

 {{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；您可以看到它正在使用传递给操作处理程序的 deferred 参数来显示数据.它说确保不直接调用 query.callback，而是始终使用提供的延迟！".这意味着，您需要调用作为第二个参数提供给操作处理程序的 deferred.我不是 ember-select-2 的专家，但你应该做的可能是

If you check the examples of ember-select-2; you can see that it is using deferred parameter passed to action handler to display the data. It says there "Make sure to not call query.callback directly but always use the provided deferred!". This means, you need to call deferred that is to be provided as the second argument to the action handler. I am not expert at ember-select-2 but what you should do is probably

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.在这个例子中；我使用了一个模拟承诺来模拟服务器远程调用并返回您提供的示例数据作为要在选择中显示的内容.您必须使用 optionLabelPath 才能在选择中显示比萨饼的名称，如 application.hbs 中所示.

Provided solution above works for the data format you have provided. Please check the corresponding twiddle. In this example; I have used a mock promise to simulate server remote call and returned the example data you have provided as the content to be displayed in select. You have to use optionLabelPath in order to display name of pizzas in the select as can be seen in application.hbs.

这篇关于在 Ajax 查询中使用预先输入时的 ember-select-2 问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！