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

时间:2015-02-07 16:04:46

标签: javascript ember.js filter

我正在父路线中填充我的模型,并向我的后端服务器调用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的属性,当我运行它时,我得到一个错误,说无法读取属性长度为null。

这就是我的模板:

<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>

任何帮助都会非常感激。

1 个答案:

答案 0 :(得分:0)

你正在使用余烬数据吗?如果你是在你的工作路线中这样做的话,那就是你用forEach做同样的事情但是把它委托给ember数据约定

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

将模型重命名为使用job而不是Job,ember遵循camelcase约定,如果你不在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>