Ember.js - Les tableaux virtuels

HTML

<script src="https://raw.github.com/emberjs/starter-kit/master/js/libs/handlebars-1.0.0.beta.6.js"></script>
<script src="https://github.com/downloads/emberjs/ember.js/ember-1.0.pre.min.js"></script>
<div id="my-app">

<script type="text/x-handlebars">
    <table border="1">                  
        {{#each row in App.day_list }} 
            <tr>
                <td>{{ row.name }}</td>
                {{#each col in row}}
                    <td>
                        {{view Ember.TextField valueBinding="col.title"}}
                    </td>
                {{/each}}
            </tr>
        {{/each}}
    </table>
</script>

    
<hr />
    
<script type="text/x-handlebars">
    <table border="1">                  
        {{#each row in App.day_list }} 
            <tr>
                <td>{{ row.name }}</td>
                {{#each col in row}}
                    <td>
                        {{view Ember.TextField valueBinding="col.title"}}
                    </td>
                {{/each}}
            </tr>
        {{/each}}
    </table>
</script>
</div>

<hr />

<p>Click on step 1, 2, 3, 4 to test.</p>

<p><a href="#" id="init_populate_button">Step 1 « init_populate »</a></p>
<p><a href="#" id="next_populate_button">Step 2 « next_populate »</a></p>
<p><a href="#" id="update_one_element">Step 3 « update_one_element »</a></p>
<p><a href="#" id="append_one_element">Step 4 « append_one_element »</a></p>

JavaScript

App = Ember.Application.create({ });

App.Day = Ember.ArrayProxy.extend({
    name: '',
    init: function() {
        this._super();
        this.set('content', []);
    }
});

App.Event = Ember.Object.extend({
    title: ''
});

App.day_list = Ember.A();

function init_populate() {
    console.log("init_populate");
    monday = App.Day.create({ name: 'Monday' });
    App.day_list.pushObject(monday);
    monday.pushObjects([
        App.Event.create({ title: 'event 1' }),
        App.Event.create({ title: 'event 2' }),
        App.Event.create({ title: 'event 3' })
    ]);

    tuesday = App.Day.create({ name: 'Tuesday' });
    App.day_list.pushObject(tuesday);
    tuesday.pushObjects([
        App.Event.create({ title: 'event 4' }),
        App.Event.create({ title: 'event 5' }),
        App.Event.create({ title: 'event 6' }),
        App.Event.create({ title: 'event 7' })
    ]);

    wednesday = App.Day.create({ name: 'Wednesday' });
    App.day_list.pushObject(wednesday);
    wednesday.pushObjects([
        App.Event.create({ title: 'event 8' }),
        App.Event.create({ title: 'event 9' })
    ]);
}

function next_populate() {
    console.log('next_populate');
    thursday = App.Day.create({ name: 'Thursday' });
    App.day_list.pushObject(thursday);
    thursday.pushObjects([
        App.Event.create({ title: 'event 10' }),
        App.Event.create({ title: 'event 11' }),
        App.Event.create({ title: 'event 12' }),
        App.Event.create({ title: 'event 13' }),
        App.Event.create({ title: 'event 14' })
    ]);

    friday = App.Day.create({ name: 'Friday' });
    App.day_list.pushObject(friday);
    friday.pushObjects([
        App.Event.create({ title: 'event 15' }),
        App.Event.create({ title: 'event 16' })
    ]);
}

function update_one_element() {
   console.log('update_one_element'); 
   console.log(App.day_list[0]);
   console.log(App.day_list[0].content[0].get('title'));
   console.log(App.day_list[0].content[0].set('title',...