CODEWITHSUNDEEP
ember.jshandlebars.js
khebbie
khebbie

Reputation: 2503

Ember, handlebars and arrays

Ok, so this is driving me crazy, I am making a prototype of a site. All I want is to add some json to the view. My json is an array, with some nested arrays. This would be an example of the json: 

    var facetList = [
        {
          'Alias' : 'WaterSaving',
          'DisplayName' : 'Vand besparende',
          'id':47,
          'Facets' : [
          { 
              'DisplayName' : 'false',
              'FacetId' : 47,
              'Value' : 'false',
              'id':0
          },
          { 'DisplayName' : 'true',
          'FacetId' : 47,
          'Value' : 'true',
          'id':1
      }
      ]
  },
  { 
      'Alias' : 'Type',
      'DisplayName' : 'Type',
      'id':48,
      'Facets' : [ 
      { 
          'DisplayName' : 'håndvask',
          'FacetId' : 48,
          'Value' : 'håndvask',
          'id':2
      },
      { 
          'DisplayName' : 'køkken',
          'FacetId' : 48,
          'Value' : 'køkken',
          'id':3
      }
      ]
  }
  ];

For this I use an ArrayController like so:

App.FacetController = Ember.ArrayController.create();
App.FacetController.set('content', facetList);

When I try to render this in the view like so: 

      <div> 
  <h2>Filtre</h2>
  {{#each App.FacetController}}
    {{DisplayName}} {{input type="checkbox" name="isAdmin" checked=valgt}}
    <br/>
    {{Facets.[1].DisplayName}}
    {{this.Facets.[1].DisplayName}}
    {{Facets}}
    {{#each Facets}}
      {{#each this}}
      this
      {{/each}}
    {{/each}} 
    {{/each}}
   </div>

I get this output: 

Vand besparende  
true true [object Object],[object Object] Type  
køkken køkken [object Object],[object Object]

It is very clear that handlebars sees an array - but it refuses to loop over this array! What am I doing wrong?

I use Ember version 1.4.0

Upvotes: 0

Views: 162

Answers (1)

Trek Glowacki
Trek Glowacki

Reputation: 3621

Here is a working jsbin: http://emberjs.jsbin.com/xixonozu/1/

There are few issues with your sample code:

App.FacetController = Ember.ArrayController.create();
App.FacetController.set('content', facetList);

Ember expects the objects in these lookup locations to be constructors, not instances, so you'd need to use Ember.ArrayController.extend();, which, of course, means you can't call set on it. Instead, you should allow Ember to create instances of these objects for you and provide model data in a route's model hook.

Similarly, in your template, you should not access global objects like you are, or use global lookup (capitalized words) with helpers like {{each}}.

In general, I'd suggest giving the Ember.js guides a read from start to finish, just to get an idea for general app structure and style.

Upvotes: 2

Related Questions