Play With Me : Ember.Select

Basics for running tests : Ember, Ember-Data, Bootstrap

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.3.1/ember.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.0.0-beta.6/ember-data.min.js"></script>
<script type="text/x-handlebars" name="application">
  <div class="container">
    <ul>
    {{#each mylist}}
      <li>{{id}} => {{label}}</li>
    {{/each}}
    </ul>
    
    <h4>1. Ember.Select with selectionBinding and null value</h4 >
      {{view Ember.Select
            contentBinding="mylist"
            optionLabelPath="content.label"
            optionValuePath="content.id"
            selectionBinding=myfirstnul
            class="form-control"}}
      <p class="text-info">
          myfirstnul contains the active &lt;option&gt; object: <br />
          myfirstnul.id = {{myfirstnul.id}}<br />
          myfirstnul.label = {{myfirstnul.label}}
      </p>

</div>
</script>

JavaScript

App = Ember.Application.create();

App.MylistController = Em.ArrayController.extend({
    myfirstnul: {
            id: 4,
            label: 'mononoke'
        },
    mysecondnul: null,
    myfirstval: 2,
    mysecondval: 4,

    init: function () {
        this._super(arguments);
        var content = this.get('content');
        content.pushObject({
            id: 1,
            label: 'totoro'
        });
        content.pushObject({
            id: 2,
            label: 'naruto'
        });
        content.pushObject({
            id: 3,
            label: 'sangoku'
        });
        content.pushObject(this.myfirstnul);
        content.pushObject({
            id: 5,
            label: 'chihiro'
        });
        content.pushObject({
            id: 6,
            label: 'nausicaa'
        });
    }
});

App.ApplicationController = Em.Controller.extend({
    needs: ['mylist'],
    mylist: Em.computed.alias('controllers.mylist.content')
});