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>
我正在通过 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>