Question

很抱歉这个长标题。很难说出来。 Ember版本：1.2.0

这里是：

我的组件：

App.AutocompleteComponent = Ember.Component.extend({
searchResults: function() {
                   var returnValue
                   var service = new google.maps.places.AutocompleteService();
                   service.getPlacePredictions({options},callback);

                   function callback(results){
                      returnValue = results;
                   }


                    return returnValue;
                   }.property('searchText')

我的模板：

{{input type="text" value=searchText placeholder="Search..."}}
<ul >
   {{#each itemResults}}
     <li>{{this.name}}</li>
   {{/each}}
</ul>

当我使用ember chrome调试工具进行调试时，我可以看到正确保存searchResults值的组件。但它没有在模板中相应更新。

有什么想法吗？

如果没有建议这种处理/使用计算属性的方法，可以建议其他任何方式吗？

提前谢谢。

Answer 1

你可能想要辩解这个（我不知道它是什么选项，它是一个全局变量吗？）。模板是itemResults而不是searchResults。 http://emberjs.com/api/classes/Ember.run.html#method_debounce

  watchSearchResults: function() {
     var self = this;
     var service = new google.maps.places.AutocompleteService();

     var callback= function(results){
         self.set('searchResults', results);
     }
     service.getPlacePredictions({options},callback);
  }.observes('searchText')

Answer 2

感谢kingpin2k的回复，

我已经找到了其他处理返回的方法，这些方法显然不适用于回调，并且因为计算属性在某种程度上需要'返回'，这使得它在这个用例上不可行。

相反，我选择使用Observers。

顺便说一句，这段代码是为了处理自动完成。

这是最终代码：

WebClient.AutocompleteFromComponent = Ember.Component.extend({
 searchTextChanged: Em.observer('searchText',function(){ 

var service = new google.maps.places.AutocompleteService();

            service.getPlacePredictions({
                input: this.get('searchText'),
                types: ['(regions)'],
                componentRestrictions: {
                    country: 'my'
                }
            }, function(predictions, status) {
                //Start callback function
                if (status != google.maps.places.PlacesServiceStatus.OK) {
                    alert(status);
                    return;
                }
                for (var i = 0, prediction; prediction = predictions[i]; i++) {
                    console.log(prediction.description);
                    mapItem = {};
                    mapItem.name = prediction.description;
                    mapItem.type = 'map'
                    mapItem.reference = prediction.reference;
                    itemResults.push(mapItem);


                }
                //console.log(itemResults)
                self.set('itemResults', itemResults)

            });
})

模板代码仍然相同。

来自计算属性回调的值回调没有更新模板

2 个答案: