CODEWITHSUNDEEP
ember.jsmodel
batman
batman

Reputation: 5390

Why doesn't Ember model update?

My goal is to simply update append a number to an array model. This should create a new HTML element due to the iterator I have used in the template.

My action does get called, but the model doesn't really update.

Here is my directory structure:

- app
  - routes
    - compare.js
  - templates
    - compare.hbs
    - application.hbs
  - app.js
  - index.html
  - router.js

compare.hbs:

<div id="container">
  <form method="post" name="login" {{action "submit" on="submit"}}>
      <p>
          Member ID
      </p>
    <p> {{input id="member-id" type="text"}} <input type="submit" value="Search"></p>
  </form>
  <div id="results">
      {{#each model as |result|}}
      <p>{{ result }}</p>
      {{/each}}
  </div>
</div>

router.js

import Ember from 'ember';
import config from './config/environment';

var Router = Ember.Router.extend({
  location: config.locationType
});

Router.map(function() {
    this.route('compare');
});

export default Router;

compare.js

import Ember from 'ember';

let results = [12, 34, 56];

export default Ember.Route.extend({
  model: function() {
    return results;
  },
  actions: {
    submit: function() {
      results.push(123);
      this.get('model').push(123);
      this.refresh();
    }
  }
});

What is the problem?

Upvotes: 0

Views: 209

Answers (1)

Cory Loken
Cory Loken

Reputation: 1395

It looks like you have a few issues. You don't need results.push as that is just adding the value to the array outside of Embers knowledge. When adding to the model use pushObject as that should notify ember of the change. There is also no need to call refresh on the model.

The documentation for pushObject shows an example very similar to what you are attempting:

http://emberjs.com/api/classes/Ember.NativeArray.html#method_pushObject

import Ember from 'ember';

let results = [12, 34, 56];

export default Ember.Route.extend({
  model: function() {
    return results;
  },
  actions: {
    submit: function() {
      this.model().pushObject(123);
    }
  }
});

Upvotes: 2

Related Questions