Router with dynamic routes

by kwladyka

HTML

<script src="https://github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-latest.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/data/ember-data-latest.js"></script>
<select id="groupNameChange" name="groupNameChange">
<option value="1"> Name 1 </option>
<option value="2"> Name 2 </option>
<option value="3"> Name 3 </option>
</select>
<p>You select {{name}} with id {{id}}</p>

CSS

header h1 {
    width: 100%; height: 40px; line-height: 40px; text-align: center;
}
header nav {
    width: 100%; text-align: center; 
}
header nav a {
    color: #008Bff; cursor: pointer;
}
p {
    padding: 20px;
}

JavaScript

window.Organizer = Ember.Application.create();

Organizer.Groups = Ember.Object.extend({
    owner: [],
    member: [],
    all: function(){
        var owner = this.get('owner');
        var member = this.get('member');
        return owner.concat(member);
    }.property('owner', 'member'),

    loadGroups: function(){
        var self = this;
        $.getJSON('http://zdaj-to.wladyka.eu/json.php?name=groups-all&user_id=58', function( data ) {
            data.forEach( function(item) {
                self.owner.pushObject(item);
            });
        });
    }.property('all')
});

Organizer.GroupsView = Ember.View.extend({

});

Organizer.CreateGroupsSelect = Ember.Select.extend({
    attributeBindings: ['name'],
    name: 'groupNameChange',
    content: Ember.A([
        { id: 1, name: 'Yehuda' },
        { id: 2, name: 'Tom' }
    ]),
    optionLabelPath: 'content.name',
    optionValuePath: 'content.id'
});