保存后,Ember Data自动刷新

时间:2015-12-04 19:28:26

标签: ember.js ember-data

我正在研究的Ember页面是显示操作员及其作业的网格,并在用户创建新作业时自动更新该列表。我目前的最佳尝试是在页面加载时绘制预先存在的作业,但页面不会刷新使用' saveNewJob'创建的任何新作业。即使我可以在Ember Inspector的数据视图中看到新工作。

这里的代码包含了一些' ..剪切...'插入以关注重要部分:

路由/ scheduler.js

export default ember.Route.extend({
    model: function() {
       return { 
          jobs: this.store.query('job', {
             location: session.location,
             date: session.selectedDate
          },
          operators: this.store.query('operator', {
             location: session.location
          }
       }
    },
    action: {
      saveNewJob: function(params) {
        var newJob = this.store.createRecord('job',{
           //job properties from params
        };
        var thisRoute = this;
        newJob.save().then(function(){ thisRoute.refresh() });
      }
    }
}

模板/ scheduler.hbs

..snip..
{{#each model.operators as |op|}}
  {{operator-row operator=op jobs=model.jobs}}
{{/each}}

{{outlet}}

模板/组件/运营商row.hbs

   <!-- Draw the grid for the operator -->
   ..snip..
   <!--Draw jobs over grid -->
   {{#if jobs.isFulfilled}}
     {{#each jobsForOperator as |job|}}
       {{operator-job job=job}}
     {{/each}}
   {{/if}}

组件/运营商row.js

jobsForOperator: Ember.computed('jobs', function() {
  var opId = this.operator.get('id');
  var retVal this.jobs.filter(function(item) {
      return item.get('operator').get('id') === opId;
  });
  <!-- Append some drawing properties to each job in retVal -->
  ..snip...
},
..snip..

我还没有看到需要向控制器/调度程序添加任何内容。 operator-job组件是一个简单的div,它使用绘图属性在操作符行中正确放置/绘制div。

有很多方法可以创建新工作,但我故意将它们排除在外,因为它们最终都会调用“拯救新工作”。我可以从那里获得一个console.log语句。

我尝试过的一个解决方案是添加一个&#39; this.store.findAll(&#39; job&#39;);&#39;在模型函数的开头,然后使用&#39; jobs:this.store.filter(&#39; job&#39;,function(){})&#39;创建model.jobs属性。尽管看到我的日期和位置匹配返回true,但既没有现有的工作也没有看到新创建的工作。

那我在这里做错了什么?有没有更好的方法让这种刷新自动发生?感谢你们所能给予的任何帮助。

1 个答案:

答案 0 :(得分:1)

这个案例有DS.Store.filter的功能。您使用它而不是查询。像这样:

let filteredJobs = this.store.filter(
    'job',
    {location: session.location, date: session.selectedDate},
    job => job.get('location') === session.location && job.get('date') === session.selectedDate
);