Question

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.

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.

I appreciate all your help. Thank you.

Here is the fiddle: http://jsfiddle.net/exciter/Y3dcs/

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();
    });

JSON FILE

{
    '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'
                    ]
}

HTML

<script type="text/x-handlebars">
    {{#view Ember.Button target="App.DObjController" action="loadAlphabets"}}
       Load Alphabets
    {{/view}}

    {{#each App.DObjController}}
        {{alphabets}}                          
    {{/each}}
</script>

Answer 1

What you want to do is create a new dObj for each letter returned by your ajax call, and then push those objects into the DObjController ArrayController.

Then, to display this array of objects you need to use the {{#each letterObj in App.DObjController}} template helper command to loop through each of the dObj instances containing your letter data and output the stored letter data.

JSFiddle example

Template:

<script type="text/x-handlebars">
    {{#view Ember.Button target="App.DObjController" action="loadAlphabets"}}
       Load Alphabets
    {{/view}}

    {{#each letterObj in App.DObjController}}
        {{letterObj.letter}}                          
    {{/each}}
</script>

JS:

$(function(){

    App = Ember.Application.create({
        ready: function(){
            alert('APP INIT');
}
    });

    App.dObj = Ember.Object.extend({
    });

    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));
            //    });
            //});

            setTimeout(function() {
                var 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"
                    ];
                alphabets.forEach(function(item){
                    self.pushObject(App.dObj.create({letter:item}));
                });
            },1000);
        }
    });
    App.initialize();
});​