如何在用户单击按钮后重新加载数据并更新绑定元素？

Question

为什么点击'Random'后，模板中的信息没有重置，数据也没有更新？

我有想要在成功到达 REST 端点后显示的数据。返回的 REST 数据是一个随机的数据库记录，所以我不需要担心随机化我的请求或任何事情。我只需要通过 URL 到达服务器。在这种情况下，URL 是：localhost:8000/api/verses/0

我的车把模板如下所示：

app/templates/verses.hbs

<div id="panel">

  <h3>{{model.reference_number}}
  <h3>{{model.body}}</h3>
  <button {{action "getAnotherVerse"}}>Random</button>

 </div>
{{outlet}}

因此，当单击 'Random' 按钮时，应调用以下内容：

app/controllers/verses.js

import Ember from 'ember';
import DS from 'ember-data';

export default Ember.ObjectController.extend({
    actions: {
        getAnotherVerse: function() {
            this.get('model').reload();
            // This is where the text should be reset to the new data.
        }
    }
});

app/routers/verses.js

import Ember from 'ember';

export default Ember.Route.extend({
    model: function() {
        return this.store.find('verse', '0');
    }
});

Answer 1

当您触发 getAnotherVerse 时，您只需获取当前记录 (model) 并简单地重新加载它以获取其最新数据。我想你想再次调用你的路线的 model 方法，所以模型将被重置，你将从你的服务器获得全新的记录。

将 getAnotherVerse 移动到您的 VersesRoute 并在其中为 VersesController 指定模型并尝试以下代码：

# app/routes/verses.js
model: function() {
  return this.store.find('verse', '0');
},
actions: {
  getAnotherVerse: function() {
    this.refresh(); # beforeModel, model, afterModel, setupController will re-fire
  }
}

如果还是不行，请试试这个：

# app/routes/verses.js
model: function() {
  return this.store.fetch('verse', '0');
},
actions: {
  getAnotherVerse: function() {
    this.store.unloadAll('verse'); # I assume `verse` is your Model name
    this.refresh(); # beforeModel, model, afterModel, setupController will re-fire
  }
}

Answer 2

您告诉 Ember 数据以查找 id = 0 的记录。只是猜测您的 API 端点将 0 视为特例并返回确实具有的记录实际 id。

因为 Ember 数据在幕后使用恒等映射，我猜当您调用 reload 时，数据正在商店中创建新记录。因此不会触发用于模型的记录的更新。

更好的方法是只使用

var that = this;
Ember.$.get('localhost:8000/api/verses/0')
  .then(function(data) {
    that.set('model', data);
  });

你也可以把data推到商店里http://emberjs.com/guides/models/pushing-records-into-the-store/，以后需要通过id找的时候就可以了。

另一种方法是创建一个自定义适配器/序列化程序来隐藏其中的一些内容，这实际上取决于您如何在该用例之外使用 ember 数据。

如何在用户单击按钮后重新加载数据并更新绑定元素？

How do I reload data and update a bound element after a user clicks a button?

ember.js

ember-data

ember-cli