1

我有一个简单的 Ember.js 应用程序。有一个application view，在那个视图里面有一个results view.

我正在使用 ember-model 以这种方式从服务器获取 JSON：

Map.Winery = Ember.Model.extend({
    name:          Ember.attr(),
    address:       Ember.attr(),
    address_2:     Ember.attr(),
    city:          Ember.attr(),
    stateprovince: Ember.attr(),
    country:       Ember.attr(),
    latitude:      Ember.attr(),
    longitude:     Ember.attr(),

    full_address: function () {
        return this.get('address') + ' ' + this.get('city') + ' ' + this.get('stateprovince') + ' ' + this.get('country');
    }.observes('address', 'city', 'stateprovince', 'country')
});

Map.Winery.adapter = Ember.Adapter.create({
    findAll: function(klass, records) {
        return Ember.$.getJSON('/api/wineries').then(function(response) {
            if (response.success) {
                records.load(klass, response.data);
            }
        });
    }
});

我使它尽可能简单，以便人们可以公平地了解正在发生的事情。

所以基本上，我的应用程序视图中有一个按钮，每当我单击时，都会调用一个调用 Map.Winery.findAll(); 的操作。（从服务器重新加载数据）。

我想要的是，每当记录中加载了新数据时，results view都应该使用新结果进行更新。

应用程序.hbs

<button class="locate" {{action "reload" on="click"}}>Reload</button>
{{view Map.ResultsView}}

application_controller.js

Map.ApplicationController = Ember.ObjectController.extend({
    actions: {
        reload: function() {
            var results = Map.Winery.findAll();
        }
    }
});

结果.hbs

<div class="results">
    {{#each results}}
        <p>{{this}}</p>
    {{/each}}
</div>

results_view.js

Map.ResultsView = Ember.View.extend({
    templateName: 'results',

    didInsertElement: function(e) {
    }

});

现在的问题是：当有新数据从服务器加载到记录时，我如何做到这一点，结果视图会更新？

我尝试插入尽可能多的相关代码，请随时提出任何问题。

谢谢

4

2 回答 2

0

我发现的最佳方法是将事件添加到需要触发的任何内容中，并在需要时使用该触发器。

使用Ember.Evented：

App.ApplicationController = Ember.ObjectController.extend(Ember.Evented, {
    viewUpdated: function(args) {} 
    /* controller stuff here */ 
});

我现在几乎可以在任何地方添加这样的事件：

this.get('controller').on('viewUpdated', $.proxy(this.viewUpdated, this));

因此，每当我必须触发视图进行更新时，我都会这样做：

this.get('controllers.application').trigger('viewUpdated', args);

（顺便说一句，args 是可选的）

这样，只要我想，事件就会被触发。它没有观察者那么强大，但它仍然可以很好地完成工作！

于 2013-10-23T16:47:07.450 回答
0

只需将新对象推送到您的集合中（或用 findAll 中的新集合替换集合）。

http://emberjs.jsbin.com/EFiTOtu/1/edit

App.IndexController = Em.ArrayController.extend({
  actions: {
    addNewColor: function(){
      this.get('model').pushObject(this.get('newColor'));
    }
  }
});
于 2013-10-21T21:57:21.360 回答