ember-select-2问题，同时使用Ajax查询提前输入 [英] 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"
    }]
   }

推荐答案

如果您查看例子;您可以看到它使用 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);
}

以上提供的解决方案适用于您提供的数据格式。请检查相应的旋转。在这个例子中我使用了一个模拟承诺来模拟服务器远程调用，并返回了您提供的示例数据作为要显示的内容。您必须使用 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.

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