Databases
StackOverflow2013
Postsdbo
POSorting an ArrayController backed by Ember-Data via sortProperty mixin
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSorting an ArrayController backed by Ember-Data via sortProperty mixin
    primarykey
    data
    text
    <p>I'd like to be able to sort an <code>ArrayController</code> whose content arises from an ember-data query. Unfortunately, the <code>sortProperty</code> mixin doesn't seem to work in this case.</p> <p>I'd like to be able to do the following:</p> <pre><code>App = Ember.Application.create(); App.store = DS.Store.create({ revision: 4}); App.Item = DS.Model.extend({ id: DS.attr('string'), name: DS.attr('string') }); App.store.createRecord(App.Item, {id: '4', name: 'banana' }); App.store.createRecord(App.Item, {id: '2', name: 'apple'}); App.store.createRecord(App.Item, {id: '6', name: 'spaghetti'}); App.ItemsController = Ember.ArrayController.create({ content: App.store.findAll(App.Item), sortProperties: ['name'] }); </code></pre> <p>With the latest version of <code>Ember</code> and Ember-data, this gives the output:</p> <pre><code>[ id: 4, name: banana ] [ id: 2, name: apple ] [ id: 6, name: spaghetti ] </code></pre> <p>The issue here is that <code>App.store.findAll()</code> returns a <code>RecordArray</code> whose content property is not simply an array of <code>App.Item</code> instances (in this case, content is [2, 3, 4])</p> <p>To actually get my hands on the instances I need to use something like <code>objectAt()</code>. But even if I extract the <code>App.Item</code> instances from the <code>RecordArray</code> and dump them in an ordinary array, things don't work as expected.</p> <p>Am I missing the obvious way to do this, or is this just the present state of the framework? I'd rather not have to replicate all of my models as plain objects just to sort them.</p> <p><strong>EDIT:</strong></p> <p>I got around the issue by making my own custom <code>ArrayController</code>. Still, it would be nice if things worked as above.</p> <p><strong>EDIT #2:</strong></p> <p>Original Handlebars template:</p> <pre><code>&lt;script type="text/x-handlebars"&gt; {{#each App.ItemsController.content }} &lt;p&gt;[ id: {{id}}, name: {{name}} ]&lt;/p&gt; {{/each}} &lt;/script&gt; </code></pre> <p>(Also, I had used a <code>sortProperty</code> property instead of <code>sortProperties</code> in my code above, but that was just a typo.)</p> <p>And yes, if one instead uses</p> <pre><code>&lt;script type="text/x-handlebars"&gt; {{#each App.ItemsController.arrangedContent }} &lt;p&gt;[ id: {{id}}, name: {{name}} ]&lt;/p&gt; {{/each}} &lt;/script&gt; </code></pre> <p>Then we get exactly what we want:</p> <pre><code>[ id: 2, name: apple ] [ id: 4, name: banana ] [ id: 6, name: spaghetti ] </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USbiegleux
    1. USahmacleod
    plurals
    1. PL
      singulars
      1. LTLinked
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POSorting an ArrayController backed by Ember-Data via sortProperty mixin
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POSorting an ArrayController backed by Ember-Data via sortProperty mixin
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POSorting an ArrayController backed by Ember-Data via sortProperty mixin
      1. This table or related slice is empty.
      1. VTUpMod
    1. COI'm sorry, you haven't done a particularly good job of explaining what's not working here, can you please put your handlebars template in. I think there's a small issue where sometimes you have to bind to the `arrangedContent` value of the `ArrayController` to get the correctly ordered objects.
      singulars
      1. POSorting an ArrayController backed by Ember-Data via sortProperty mixin
      1. USBradley Priest
 

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