CODEWITHSUNDEEP
javascriptember.js
marendra
marendra

Reputation: 63

Update Ember model from controller

currently i try to create like infinite scroll by putting some button in the template to load more data.

bellow is the code

index.hbs

{{#each model}}
  <p>{{name}}</p>
{{/each}}
<button {{action "addMore"}}>Add More</button>

controller/index.js

import Ember from 'ember';

export default Ember.ArrayController.extend({
  actions:{
    addMore: function (){
      this.get("model").push({name:"some data"});
    }
  }
});

and route index.js

import Ember from 'ember';

export default Ember.Route.extend({
  model: function() {
    var v=[];
    return v;
  }
});

The problem was, after user clicked the button, the controller pushed the data into the model, but the template did not show model with current data (data after the controller push new data into the model).

please help

thanks

Upvotes: 0

Views: 2420

Answers (1)

Patsy Issa
Patsy Issa

Reputation: 11293

A few things that are wrong/deprecated in your code:

export default Ember.ArrayController.extend becomes export default Ember.Controller.extend

  • {{#each model}} now takes the form of {{#each model as |myNameObject|}}} (the old way still works but it is recommended to use block scoping) and in the template you would use {{myNameObject.name}}

  • You are using .push when you should be using pushObject

JsBin demo.

Upvotes: 2

Related Questions