从控制器更新Ember模型

Question

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

Answer 1

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

• Ember.ArrayController is deprecated, use Ember.Controller instead.

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.