Ember.js - Tableaux pivoté

by stephane_klein

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">
            <tr>
                {{#each day in App.day_list}}
                <td>
                    {{ day.name }}
                </td>
                {{/each}}
            </tr>                    
        {{#each row in App.planning.rows }} 
            <tr>
                {{#each col in row}}
                    <td>
                        {{#if col}}
                        {{ view Ember.TextField valueBinding="col.title" }}
                        {{else}}
                        -
                        {{/if}}
                    </td>
                {{/each}}
            </tr>
        {{/each}}
    </table>
    <hr />
    <table border="1">
            <tr>
                {{#each day in App.day_list}}
                <td>
                    {{ day.name }}
                </td>
                {{/each}}
            </tr>                    
        {{#each row in App.planning.rows }} 
            <tr>
                {{#each col in row}}
                    <td>
                        {{#if col}}
                        {{ view Ember.TextField  valueBinding="col.title" }}
                        {{else}}
                        -
                        {{/if}}
                    </td>
                {{/each}}
            </tr>
        {{/each}}
    </table>
    <hr />
    </script>
</div>


<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: '',
    day: null
});

App.day_list = Ember.A();

App.planning = Ember.Object.create({
    rows: Ember.ArrayProxy.create({
        content: [],
        sync: function() {
            console.log('sync');
            var max = 0;
            $(App.day_list).each(function(index, element) {
                console.log(element);
                if (element.get('length') > max) {
                    max = element.get('length');
                }
            });
            console.log(max);
            this.content.clear();
            for(var i=0; i < max ; i++) {
                this.content.pushObject(
                    Ember.ArrayProxy.create({
                        content: [],
                        row_index: i,
                        length: function() {
                            return App.day_list.length;
                        }.property(),
                        objectAtContent: function(col_index) {                        
                            if (App.day_list[col_index]) {
                                return App.day_list[col_index].objectAtContent(this.row_index);
                            }
                            return undefined;
                        }
                    })
                );
            }
        }
    })
});
console.log(App);

Ember.addObserver(
   App.day_list,
   '@each.[]',
    App.planning.rows,
    'sync'
);

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' });
 ...