为什么Ember模型不更新？

Question

我的目标是简单地将数字追加到数组模型中。 由于我在模板中使用了迭代器，因此应该创建一个新的HTML元素。

我的动作确实被调用，但是模型并没有真正更新。

这是我的目录结构：

- 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();
    }
  }
});

问题是什么？

Answer 1

您似乎有一些问题。 您不需要result.push，因为这只是将值添加到Embers知识之外的数组。 当添加到模型中时，请使用pushObject，因为它应将更改通知ember。 也无需在模型上调用刷新。

pushObject的文档显示了一个与您尝试的示例非常相似的示例：

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);
    }
  }
});