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 に答える