I was previously working with Ember.StateManager and now I'm doing some tests before I finally switch to Ember.Router, but I'm failing to understand how to properly bind my view data from the collection residing in my controller.
I have a very simple testing structure with Ember.Router which is working fine navigation-wise, but when it comes to data binding it's not working as expected, and I confess I'm lost now. As for my data, I have a simple ASP.NET MVC4 Web API running a REST service which is working fine (I have tested with Fiddler and it's all good). Storing in SQL with EF4.* and no problems there.
As for the client app, in my contacts.index route, I tried binding it in the connectOutlets (should I be doing this in a different method?), but my code doesn't seem to be working correctly since my view is never bound.
What I have tried before, in the connectOutlets method of contacts.index route:
1
router.get('applicationController').connectOutlet('contact');
2
router.get('applicationController').connectOutlet(
'contact',
router.get('contactController').findAll()
);
I've also tried to use the enter method with
this.setPath('view.contacts', router.get('contactController').content);
And I have tried to bind it directly in the view like:
App.ContactView = Ember.View.extend({
templateName: 'contact-table'
contactsBinding: 'App.ContactController.content'
});
Here's the current version of my code:
var App = null;
$(function () {
App = Ember.Application.create();
App.ApplicationController = ...
App.ApplicationView = ...
App.HomeController = ...
App.HomeView = ...
App.NavbarController = ...
App.NavbarView = ...
App.ContactModel = Ember.Object.extend({
id: null,
firstName: null,
lastName: null,
email: null,
fullName: function () {
return '%@ %@'.fmt(this.firstName, this.lastName)
}.property('firstName', 'lastName')
});
App.ContactController = Ember.ArrayController.extend({
content: [],
resourceUrl: '/api/contact/%@',
isLoaded: null,
findAll: function () {
_self = this;
$.ajax({
url: this.resourceUrl.fmt(''),
type: 'GET',
contentType: 'application/json; charset=utf-8',
success: function (data) {
$(data).each(function () {
_self.pushObject(App.ContactModel.create({
id: this.Id,
firstName: this.FirstName,
lastNaem: this.LastName,
email: this.Email
}));
});
alert(_self.get('content').length);
// this alerts 6 which is the same number of
// records in my database, and if I inspect
// the content collection in chrome, I see my data
// that means the problem is not the ajax call
},
error: function (xhr, text, error) {
alert(text);
}
});
},
find: function (id) {
// GET implementation
},
update: function (id, contact) {
// PUT implementation
},
add: function (contact) {
// POST implementation
},
remove: function(id) {
// DELETE implementation
}
});
App.ContactView = Ember.View.extend({
templateName: 'contact-table'
});
App.ContactListItemView = Ember.View.extend({
templateName: 'contact-table-row'
});
App.Router = Ember.Router.extend({
enableLogging: true,
location: 'hash',
root: Ember.Route.extend({
// actions
gotoHome: Ember.Route.transitionTo('home'),
gotoContacts: Ember.Route.transitionTo('contacts.index'),
// routes
home: Ember.Route.extend({
route: '/',
connectOutlets: function (router, context) {
router.get('applicationController').connectOutlet('home');
}
}),
contacts: Ember.Route.extend({
route: '/contacts',
index: Ember.Route.extend({
_self: this,
route: '/',
connectOutlets: function (router, context) {
router.get('contactController').findAll();
router.get('applicationController').connectOutlet('contact');
router.get('contactView').set('contacts', router.get('contactController').content);
// if I inspect the content collection here, it's empty, ALWAYS
// but if I access the same route, the controller will alert
// the number of items in my content collection
}
})
})
})
});
App.initialize();
});
Here are the relevant templates:
<script type="text/x-handlebars" data-template-name="contact-table">
<table>
<thead>
<tr>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
{{#if contacts}}
{{#each contact in contacts}}
{{view App.ContactListItemView contactBinding="contact"}}
{{/each}}
{{else}}
<tr>
<td colspan="2">
You have no contacts <br />
:(
<td>
</tr>
{{/if}}
</tbody>
</table>
</script>
<script type="text/x-handlebars" data-template-name="contact-table-row">
<tr>
<td>
{{contact.fullName}}
</td>
<td>
e-mail: {{contact.email}}
</td>
</tr>
</script>
As a test, I've also tried manually populat the content collection in my controller like the following, but again, it was empty when I navigated to that route:
App.ContactController = Ember.ArrayController.extend({
content: [],
init: function() {
this._super();
this.pushObject(
App.ContactModel.create({ ... })
);
}
})
Right, if you manage to read until now, here's my question: How to properly bind a collection to a view using Ember.Router?
I have seen a number of examples, as well as other questions in SO, and I haven't seen anything that works for me yet (feel free to point out other samples with binding)
Thank you