Ember.js 控制器计算属性不会立即显示新的数据添加，其中数据不是从路由模型返回的数据

总结：

控制器计算属性问题：在一种情况下，我可以看到所有添加的内容，但不能立即看到新添加的内容（），在另一种情况下，我可以立即看到新添加的内容，但以前添加的内容不会显示（）

8月26日的第二次更新：

所以我在想。。。我有这两段互补的代码。我只需要把它们结合起来，达到完美，对吗？不幸的是，它失败得很惨，正如你所说，什么也没有出现（

这是我合并两个RecordArray的失败尝试：

officelist: function(){
  var allrecords = [];
  console.log("in oficelist");

  // get the record array that shows previously added records
  var a_recordarray =  App.Office.find({org_id: 'myorgid'});
  a_recordarray.forEach(function(record){
    allrecords.push(record);
  });
  console.log(a_recordarray.toString());
  console.log(allrecords.length);

  // get the record array that shows newly added records
  var b_recordarray = App.Office.filter(function(office) {
        return office.get('org_id') === 'myorgid';
    });
  b_recordarray.forEach(function(record){
    allrecords.push(record);
  });
  console.log(b_recordarray.toString());
  console.log(allrecords.length);

  // return the combination
  return allrecords;

}.property('content.@each')

---

详情：

我有一个在代码中使用控制器计算属性来显示要显示的名称列表的功能。问题是，每当添加新名称时，您必须刷新页面才能看到它被显示

你可以看到它的形状

具有计算属性的控制器代码：

officelist: function(){
  return App.Office.find({org_id: 'myorgid'});
}.property('content.@each')

officelist: function(){
  return App.Office.find({org_id: 'myorgid'});
}.property('office.@each')

返回不同型号的路线：

App.OrganizationRoute = Ember.Route.extend({
  model: function() {
    return App.Org.find();
  }
});

车把：

{{#each officelist}}
  <li>{{officename}} </li>
{{/each}}

{{#each officelist}}
  <li>{{officename}} </li>
{{/each}}

车把：

{{#each officelist}}
  <li>{{officename}} </li>
{{/each}}

{{#each officelist}}
  <li>{{officename}} </li>
{{/each}}

{{{#每个办公室列表}
{{officename}}
{{/每个}}

---

问题是，计算属性被缓存，并且只有在

office时才会刷新。@each

更改。

office

属性未在该控制器上定义，因此

office。@each

始终为空。您可能需要的是

内容。@each

。因此：

officelist: function(){
  return App.Office.find({org_id: 'myorgid'});
}.property('content.@each')

---

现在，每当添加新的office时，页面都将刷新。

问题是，计算属性被缓存，并且只有在

office时才会刷新。@each

更改。

office

属性未在该控制器上定义，因此

office.@each

始终为空。您可能需要的是

内容。@each。因此：

officelist: function(){
  return App.Office.find({org_id: 'myorgid'});
}.property('content.@each')

现在，每当添加新办公室时，页面都将刷新。
将App.OrganizationController的officelist属性更改为：

officelist: function() {
  return App.Office.filter(function(office) {
    return office.get('org_id') === 'myorgid';
  });
}.property()

原因是调用
App.Office.find（）
会尝试从适配器（在您的情况下为localStorage）获取数据。您只需将其从存储中取出即可。为此，
App.Office.filter（）
（在其他情况下，
App.Office.all（）
）是您的朋友

更新：

要同时获取以前保存的其他办公室，请使用find（）获取它们。您可以在路由的
setupController
hook中初始化控制器时执行此操作

App.OrganizationRoute = Ember.Route.extend({
  model: function() {
    return App.Org.find();
  },
  setupController: function(controller, model) {
    this._super.apply(this, arguments);
    App.Office.find({org_id: 'myorgid'});
  }
});

您不必担心存储结果，因为任何生成的Office记录都将加载到存储中，并且您的
App.Office.all（）
和
App.Office.filter（）
调用将自动获得更新。
将App.OrganizationController的officelist属性更改为：

officelist: function() {
  return App.Office.filter(function(office) {
    return office.get('org_id') === 'myorgid';
  });
}.property()

原因是调用
App.Office.find（）
会尝试从适配器（在您的情况下为localStorage）获取数据。您只需将其从存储中取出即可。为此，
App.Office.filter（）
（在其他情况下，
App.Office.all（）
）是您的朋友

更新：

要同时获取以前保存的其他办公室，请使用find（）获取它们。您可以在路由的
setupController
hook中初始化控制器时执行此操作

App.OrganizationRoute = Ember.Route.extend({
  model: function() {
    return App.Org.find();
  },
  setupController: function(controller, model) {
    this._super.apply(this, arguments);
    App.Office.find({org_id: 'myorgid'});
  }
});

您不必担心结果的存储，因为任何生成的Office记录都将加载到存储中，并且您的
App.Office.all（）
和
App.Office.filter（）
调用将自动获得更新。
如果不使用
org\u id
参数执行
find
调用，则所有操作都会按照您的需要进行：

officelist: function(){
  return App.Office.find();
}.property('content.@each')

如果不使用
org\u id
参数执行
find
调用，则一切都可以正常工作：

officelist: function(){
  return App.Office.find();
}.property('content.@each')

Mike，一如既往，我对你的及时有效的回答感到惊讶和感激。你能解释一下
content
从何而来吗？很乐意帮助。每个ArrayController都有一个content属性。默认情况下，Ember.Route的
setupController
会将该content属性设置为模型挂钩返回的任何内容。既然
App.OrganizationRoute
有一个模型钩子，返回
App.Office.find（）
，
内容
是一个包含所有组织的实时集合。嗨，迈克，谢谢你的解释！我的jsbin案例太简单了，我用最坏的情况更新了这个问题，根据这个答案有一个半可接受的解决方案。每次“添加”时我都可以手动刷新页面用
location.reload（）单击按钮
。还有。我有一个没有刷新的版本。必须进行一些重构。不确定我所做的所有更改是否都需要，但请看一看：迈克，一如既往，我对你的提示和有效的回答感到惊讶和感激。你能解释一下
内容的来源吗？很乐意帮助。每个ArrayController都有一个内容属性。默认情况下，Ember.Route的
setupController
会将该内容属性设置为模型挂钩返回的任何内容。因此，由于
App.OrganizationRoute
有一个返回
App.Office.find（）的模型挂钩
，
内容
是一个包含所有组织的实时集合。嗨，迈克，谢谢你的解释！我的jsbin案例太简单了，我用最坏的情况更新了这个问题，根据这个答案有一个半可接受的解决方案。每次“添加”时我都可以手动刷新页面用
location.reload（）单击按钮
。还有。我有一个不需要刷新的版本。必须进行一些重构。我不确定我所做的所有更改是否都需要，但请看一看：嗨，Jonathan，你的答案并不完全有效。当然，它会立即添加新条目，但在刷新页面后，你看不到以前的条目，并与它显示的位置进行比较刷新后的上一个条目将显示，但不显示新条目