I previously worked with Ember.StateManager , and now I do some tests before I finally switch to Ember.Router , but I don’t understand how to correctly bind the data of my view from the collection located in my controller.
I have a very simple testing framework with Ember.Router that works fine with navigation, but when it comes to data binding, it does not work as expected, and I admit I'm lost now. As for my data, I have a simple ASP.NET MVC4 Web API that runs a REST service that works fine (I tested with Fiddler and all this is good). SQL storage with EF4. * And there are no problems.
As for the client application, in my contacts.index route, I tried linking it to connectOutlets (should I do it with a different method?), But my code seems to work incorrectly, since my view is never connected.
What I tried earlier in the connectOutlets method of the connectOutlets route:
one
router.get('applicationController').connectOutlet('contact');
2
router.get('applicationController').connectOutlet( 'contact', router.get('contactController').findAll() );
I also tried using the enter method with
this.setPath('view.contacts', router.get('contactController').content);
And I tried to link it directly in the view, for example:
App.ContactView = Ember.View.extend({ templateName: 'contact-table' contactsBinding: 'App.ContactController.content' });
Here is 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 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 also tried to manually put the content collection in my controller, as shown below, but again, when I switched to this route, it was empty:
App.ContactController = Ember.ArrayController.extend({ content: [], init: function() { this._super(); this.pushObject( App.ContactModel.create({ ... }) ); } })
That's right, if you can still read, here's my question: How to properly bind a collection to a view using Ember.Router?
I saw some examples, as well as other questions in SO, and I haven't seen anything that works for me yet (feel free to specify other samples with a binding )
thanks