Databases
StackOverflow2013
Postsdbo
POEmber.js - How to properly bind a collection to a view using Ember.Router?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POEmber.js - How to properly bind a collection to a view using Ember.Router?
    primarykey
    data
    text
    <p>I was previously working with <code>Ember.StateManager</code> and now I'm doing some tests before I finally switch to <code>Ember.Router</code>, but I'm failing to understand how to properly bind my view data from the collection residing in my controller.</p> <p>I have a very simple testing structure with <code>Ember.Router</code> which is working fine <em>navigation-wise</em>, 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.</p> <p>As for the client app, in my <code>contacts.index</code> route, I tried binding it in the <code>connectOutlets</code> (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. </p> <p>What I have tried before, in the <code>connectOutlets</code> method of <code>contacts.index</code> route:</p> <p>1 </p> <pre><code>router.get('applicationController').connectOutlet('contact'); </code></pre> <p>2</p> <pre><code>router.get('applicationController').connectOutlet( 'contact', router.get('contactController').findAll() ); </code></pre> <p>I've also tried to use the <code>enter</code> method with</p> <pre><code>this.setPath('view.contacts', router.get('contactController').content); </code></pre> <p>And I have tried to bind it directly in the view like:</p> <pre><code>App.ContactView = Ember.View.extend({ templateName: 'contact-table' contactsBinding: 'App.ContactController.content' }); </code></pre> <p>Here's the current version of my code:</p> <pre><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(); }); </code></pre> <p>Here are the relevant templates:</p> <pre><code>&lt;script type="text/x-handlebars" data-template-name="contact-table"&gt; &lt;table&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;Name&lt;/th&gt; &lt;th&gt;Email&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; {{#if contacts}} {{#each contact in contacts}} {{view App.ContactListItemView contactBinding="contact"}} {{/each}} {{else}} &lt;tr&gt; &lt;td colspan="2"&gt; You have no contacts &lt;br /&gt; :( &lt;td&gt; &lt;/tr&gt; {{/if}} &lt;/tbody&gt; &lt;/table&gt; &lt;/script&gt; &lt;script type="text/x-handlebars" data-template-name="contact-table-row"&gt; &lt;tr&gt; &lt;td&gt; {{contact.fullName}} &lt;/td&gt; &lt;td&gt; e-mail: {{contact.email}} &lt;/td&gt; &lt;/tr&gt; &lt;/script&gt; </code></pre> <p>As a test, I've also tried manually populat the <code>content</code> collection in my controller like the following, but again, it was empty when I navigated to that route:</p> <pre><code>App.ContactController = Ember.ArrayController.extend({ content: [], init: function() { this._super(); this.pushObject( App.ContactModel.create({ ... }) ); } }) </code></pre> <p>Right, if you manage to read until now, here's my question: How to properly bind a collection to a view using Ember.Router?</p> <p>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 <strong>with binding</strong>)</p> <p>Thank you</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USsly7_7
    1. USMilkyWayJoe
    plurals
    1. PL
      singulars
      1. LTLinked
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POEmber.js - How to properly bind a collection to a view using Ember.Router?
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POEmber.js - How to properly bind a collection to a view using Ember.Router?
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POEmber.js - How to properly bind a collection to a view using Ember.Router?
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload