Ember Latest

The latest build of Ember.

by EbenRoux

HTML

<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/ember-latest.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    <h1>ember-latest jsfiddle</h1>
    {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
  <h2>Users:</h2>
  {{view Ember.Select contentBinding="users" optionLabelPath="content.login" optionValuePath="content.id" valueBinding="selectedUserId" selectionBinding="selectedUser"}}
    <br/>
    selected user id: {{selectedUserId}}
    <br/>
    selected user login: {{selectedUser.login}}
    <br/>
    <br/>
  <button {{action "load"}}>
    load
  </button>   
  <button {{action "loadAndSet"}}>
    load and set
  </button>   
</script>

CSS

h1 { font-size: 1.6em; padding-bottom: 10px; }
h2 { font-size: 1.4em; }
ul { padding: 15px; font-size: 1.4em; color: green; }

JavaScript

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

App.IndexRoute = Ember.Route.extend({
    setupController: function(controller, model){
        controller.send('load');
    }
});

App.IndexController = Ember.Controller.extend({
    users: Ember.A(),
    actions: {
        load: function(){
            this.get('users').clear();
            this.set('selectedUserId', undefined);
            this.get('users').pushObject({ "login": "user-A", "id": 1});
            this.get('users').pushObject({ "login": "user-B", "id": 2});
        },
        loadAndSet: function(){
            this.get('users').clear();
            this.set('selectedUserId', undefined);
            this.get('users').pushObject({ "login": "user-A", "id": 1});
            this.get('users').pushObject({ "login": "user-B", "id": 2});
            
            this.set('selectedUserId', 1);
        }
    }
});