ember-select-2问题在使用Ajax查询的类型预测时

Question

我正在使用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"
 }}

和动作处理程序是

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"
    }]
   }

Answer 1

如果检查ember-select-2的示例；您可以看到它使用传递给Action Handler的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。在此示例中；我已经使用模拟承诺模拟服务器远程调用，并返回了您提供的示例数据作为要在SELECT中显示的内容。您必须使用optionLabelPath才能在选择中显示披萨的名称，如application.hbs所示。