title: Loading JSON data and binding it to an array within an model and then display the array elements?
body: <p>I would like to know the correct way of doing this task, I have a JSON file which has alphabets from A to Z. I would like to load the file within my app and assigned the loaded data to an array called "alphabets" within a model called "dObj" and then display all the elements of the array using {{#each}} loop.</p>
  
  <p>I am uncertain about how to bind the data to the model. Within ArrayController's pushObject() method, I am passing the create() method whereas I should not only be creating the object, but also be pushing the load data to the array within the model.</p>
  
  <p>I appreciate all your help. Thank you.</p>
  
  <p>Here is the fiddle: <a href="http://jsfiddle.net/exciter/Y3dcs/" rel="nofollow">http://jsfiddle.net/exciter/Y3dcs/</a></p>
  
  <p>CODE:</p>
  
  <pre><code>    $function(){
  
          App = Ember.Application.create();
  
          App.dObj = Ember.Object.extend({
              alphabets: []
          });
  
          App.DObjController = Ember.ArrayController.create({
              content: [],
              loadAlphabets: function(){
                  var self = this;
                  $.getJSON('data/alphabets.json', function(data){
                      data.forEach(function(item){
                          self.pushObject(App.dObj.create(item));
                      });
                  });
              }
          });
          App.initialize();
      });
  </code></pre>
  
  <p>JSON FILE</p>
  
  <pre><code>{
      'alphabets' : [
                      'A','B''C','D','E','F','G',
                      'H','I','J','K','L','M','N',
                      'O','P','Q','R','S','T','U',
                      'V','W','X','Y','Z'
                      ]
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;script type="text/x-handlebars"&gt;
      {{#view Ember.Button target="App.DObjController" action="loadAlphabets"}}
         Load Alphabets
      {{/view}}
  
      {{#each App.DObjController}}
          {{alphabets}}                          
      {{/each}}
  &lt;/script&gt;
  </code></pre>