Ember SelectBoxIt

by ethan_selzer

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.1/ember.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.2.0/jquery.selectBoxIt.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.2.0/jquery.selectBoxIt.css">
<script type="text/x-handlebars" data-template-name="application">
    <h1>Application Template</h1>
    {{ outlet }}
</script>

<script type="text/x-handlebars" data-template-name="index">
    <h2>Index Template</h2>
</script>

<select id="sb">
    <option value="1">one</option>
    <option value="2">two</option>
</select>

CSS

body {
  padding: 2em;   
}

JavaScript

App = Ember.Application.create();

$( function(){
    $( '#sb' ).selectBoxIt( { showEffect: "fadeIn" } );
} );

App.Colors = Ember.Object.extend();
App.Colors.reopenClass( {
    model : Ember.A( [] ),
    find : function( range ){
        var model = this.create( {
            colors : Ember.A([])  
        } );
        window.setTimeout( function(){
           model.set( 'colors', Ember.A( [
               Ember.Object.create( { color : 'green' } ),
               Ember.Object.create( { color : 'blue' } ),
               Ember.Object.create( { color : 'red' } ),
               Ember.Object.create( { color : 'orange' } )
          ] ) );
        }, 500 );
        
        return model;
    }
} );