Ember.js - 无法根据嵌套路线中的今天日期过滤我的模型

Ember.js - Cant filter my model based on today's date in nested route

我正在通过 AJAX 调用我的后端服务器在父路由中填充我的模型,并且一切正常,但我试图根据今天的日期仅显示某些项目子路由,但我遇到了麻烦。

这是我的路由器

Aplus.Router.map(function () {
  this.resource('index', { path: '/'});
  this.resource('Dashboard', function() {
    this.resource('Agents', function() {
        this.resource('AllAgents');
    });
    this.resource('Jobs', function() {
        this.resource('AllJobs');
        this.resource('TodaysJobs');
        this.resource('NewJob');
    });
});

在 Jobs 路径中,我正在填充模型,我想在 TodaysJobs 路径中显示模型的过滤版本

Aplus.JobsRoute = Ember.Route.extend({
  model: function() {
    var self = this; //otherwise will lose context of this in getJSON
    var jobObjects = [];

    Ember.$.getJSON('/jobs', function(jobs) {
      jobs.forEach(function(job) {
        jobObjects.pushObject(self.store.createRecord("job", job));
      });
    });
    return jobObjects;
  },
});
Aplus.TodaysJobsRoute = Ember.Route.extend({
  renderTemplate: function() {
    this.render('todaysJobs');
  }
});

这就是我在控制器中的内容(JobsController 中没有)

Aplus.TodaysJobsController = Ember.ObjectController.extend({
  filtered: function() {
    console.log(this.store.find('Job'));
    return this.store.find('Job').filteryBy('jobDate', '2015-2-7', true);
  }.property('Job'),
});

我不确定我是否正确使用了 Ember 的 属性,当我使用 运行 时,我收到一条错误消息说无法读取 属性 长度为空。

这是我的模板的样子:

<table class="table table-striped" id="jobs">
  <thead>
    <tr>
      <th> Job Date </th>
      <th> Customer Name </th>
      <th> Address </th>
      <th> City </th>
      <th> Phone Number </th>
      <th> Status </th>
      <th> Total Cost </th>
      <th> Notes </th>
      <th> Agent First Name </th>
      <th> Agent Last Name </th>
      <th> </th>
    </tr>
  </thead>
  <tbody>
    {{#each job in filtered}}
      <tr>
        <td> {{job.jobDate}} </td>
        <td> {{job.customerName}} </td>
        <td> {{job.customerAddress}} </td>
        <td> {{job.customerCity}} </td>
        <td> {{job.customerPhoneNo}} </td>
        <td> {{job.status}} </td>
        <td> {{job.totalCost}} </td>
        <td> {{job.notes}} </td>
        <td> {{job.agentFirstname}} </td>
        <td> {{job.agentLastname}} </td>
        <td> <button class="btn btn-secondary">Edit</td>
      </tr>
    {{/each}}
  <tbody>
</table>

如有任何帮助,我们将不胜感激。

您在使用 ember 数据吗?如果你在你的工作路线上这样做,它正在做你在上面用 forEach 做的同样的事情,但是将它委托给 ember 数据约定

model: function() {
    return this.store.find('job');
});

重命名您的模型以使用 job 而不是 Job,ember 遵循驼峰式惯例,如果您不在 AJAX 调用中更改它,它可能会 /Jobs

在这里做这个

Aplus.TodaysJobsRoute = Ember.Route.extend({
  renderTemplate: function() {
    this.render('todaysJobs');
  },
  model: function() {
     return store.filter('job', function(job) {
          return Ember.isEqual(job.get('jobDate'), '2015-2-7');
     });
  }
});

将您的控制器更新为 ArrayController 并丢失过滤后的计算 属性

Aplus.TodaysJobsController = Ember.ArrayController.extend({});

您的 TodaysJob 模板应该如下所示

<table class="table table-striped" id="jobs">
  <thead>
    <tr>
      <th> Job Date </th>
      <th> Customer Name </th>
      <th> Address </th>
      <th> City </th>
      <th> Phone Number </th>
      <th> Status </th>
      <th> Total Cost </th>
      <th> Notes </th>
      <th> Agent First Name </th>
      <th> Agent Last Name </th>
      <th> </th>
    </tr>
  </thead>
  <tbody>
    {{#each job in controller}}
      <tr>
        <td> {{job.jobDate}} </td>
        <td> {{job.customerName}} </td>
        <td> {{job.customerAddress}} </td>
        <td> {{job.customerCity}} </td>
        <td> {{job.customerPhoneNo}} </td>
        <td> {{job.status}} </td>
        <td> {{job.totalCost}} </td>
        <td> {{job.notes}} </td>
        <td> {{job.agentFirstname}} </td>
        <td> {{job.agentLastname}} </td>
        <td> <button class="btn btn-secondary">Edit</td>
      </tr>
    {{/each}}
  <tbody>
</table>