I'm populating my model in the parent route with an AJAX call to my backend server, and everything works with that, but I'm trying to display only certain items based on today's date in a child route, but I'm having trouble.
Here's my router
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');
});
});
In the Jobs route, I'm populating the model, and I want to display a filtered version of the model in the TodaysJobs route
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');
}
});
This is what I have in the controller (nothing in the 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'),
});
I'm unsure if I'm using Ember's property right, and when I run this I get an error saying cannot read property length of null.
This is what my template looks like:
<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>
Any help would much appreciated.
Aucun commentaire:
Enregistrer un commentaire