CODEWITHSUNDEEP
ember.js
micahblu
micahblu

Reputation: 5212

How to automatically update contents of an Ember Component

I have a transactions component, that doesn't auto update when new a transaction is added to the model that supplies its context.

If I leave to another route and come back, it renders it?

dashboard.hbs

 <h3>Recent Transactions</h3>
 {{transaction-history transactions=transactions}}

components/transaction-history.hbs

{{#each transaction in transactions}}
<tr>
  <td>{{transaction.ref_number}}</td>
  <td>{{transaction.date}}</td>
  <td>{{transaction.recipient}}</td>
  <td>${{transaction.amount}}</td>
</tr>
{{/each}}

action method in my Dashboard Controller

actions: {
  submitQuickSend: function(){
    var self = this;
    $.get('http://localhost:8080', {request: 'generic'}).then(function(response){

      App.Transactions.push(App.Transaction.create({
        id: '',
        foo: 'bar'
      }));

      self.set('transactions', self.get('transactions'));

    });
  }
}

Upvotes: 1

Views: 210

Answers (2)

JJJ
JJJ

Reputation: 2899

All you have to do is change push to pushObject

actions: {
  submitQuickSend: function(){
    var self = this;
    $.get('http://localhost:8080', {request: 'generic'}).then(function(response){

      App.Transactions.pushObject(App.Transaction.create({ // change to pushObject
        id: '',
        foo: 'bar'
      }));

      self.set('transactions', self.get('transactions'));

    });
  }
}

Upvotes: 2

chopper
chopper

Reputation: 6709

Change

{{transaction-history transactions=transactions}}

to

{{transaction-history transactionsBinding="transactions"}}

Upvotes: -1

Related Questions