1

我正在尝试使用 emberjs 创建自动完成行为。我在控制器中观察输入字段 ( searchCity) 并根据该字段进行 ajax 调用。我有一个处理额外逻辑的视图，并且应该显示一个可点击城市列表作为建议。到目前为止，我有以下代码：

var labelView = Ember.View.extend({
                templateName: 'searchedCities',
                geoData: null,
                click:function(){
                    debugger;
                }
            }),
    ModalView = Ember.View.extend({
    layoutName: 'modal_layout',
    cities: null,
    didInsertElement: function() {
        this.cities = Ember.CollectionView.create({
                tagName: 'span',
                itemViewClass: labelView
        });
    },
    cityList: function(){

        var callback,
            cities = this.get('cities'),
            searchCity = this.get('controller').get('searchCity'),
            regExp = new RegExp(searchCity, 'i');

        if (!searchCity){
            return;
        }
        callback = function(data){
            var aux = data.filter(function(geoObjects){
                return geoObjects.city.match(regExp);
            }).slice(0,9);

            cities.clear();
            aux.forEach(function(geoData){
                cities.pushObject(labelView.create({geoData:geoData}));
            });
        };
        Store.resolveGeoData(callback);
    }.property('controller.searchCity')
});

在我的模板中，我有以下代码：

{{view Ember.TextField valueBinding=searchCity placeholder="City"}}

             {{#each view.cities}}
                {{this.geoData.city}}
            {{/each}}

            {{#each view.cityList}}
                {{this.city}}
            {{/each}}

即使在回调中，我可以检查城市是否填充了模板中的视图，如果我删除{{#each view.cityList}}{{/each}}，则不会显示任何内容，但如果我将其留在那里，它会显示。

4

0 回答 0