FancySelect Ember Component

by amindunited

HTML

<link rel="stylesheet" href="https://rawgit.com/amindunited/FancySelect/master/fancySelect.css"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.9.1/ember.min.js"></script>
<script src="https://rawgit.com/amindunited/FancySelect/master/fancySelect.js"></script>

<script type="text/x-handlebars" data-template-name="application">
    <p>pp</p>
    {{fancy-select content=view.options}}
    <hr/>
    {{fancy-select content=view.options}}
</script>
<script type="text/x-handlebars" data-template-name="components/fancy-select">
   
    {{view 'select' content=content selection=selection}}
</script>

JavaScript

App = Em.Application.create();
App.ApplicationView = Em.View.extend({
    options: ["flip", "flap", "fark"]
});

App.FancySelectComponent = Em.Component.extend({
    didInsertElement: function(){
        var that = this;
        this.$('select').fancySelect().on('change.fs', function(e){
            var newVal = that.$('li.selected').attr('data-raw-value');
            console.log("change here! ", e, newVal);
            that.set('selection', newVal);

        });
    },
    selectionObserver: function(i){
        console.log("change", i);
    }.observes('selection'),
    
});