ember components test

by amindunited

HTML

<script scr="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.1.2/handlebars.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.1.2/ember.min.js"></script>

<script type="text/x-handlebars" data-template-name="application">
    Application
    {{scrollable}}
</script>
<script type="text/x-handlebars" data-template-name="components/scrollable">
    SCrollable!!
    {{tab-set-second fark="cheese"}}
</script>
<script type="text/x-handlebars" data-template-name="components/tab-set">
    <ul>
        {{fark}}
    {{#each title in titles}}
        <li><a {{action 'boom' title }}>bam</a></li>
    {{/each}}
    </ul>
</script>

<script type="text/x-handlebars" data-template-name="components/tab-set-second">
    <ul>
        {{fark}}
    {{#each title in titles}}
        {{#with titles}}
            <li><a {{action 'boom' title this }}>bam</a></li>
        {{/with}}
    {{/each}}
    </ul>
</script>

JavaScript

App = Em.Application.create();
App.TabSetComponent = Em.Component.extend({
    titles:['one', 'two', 'three'],
});
App.TabSetSecondComponent = App.TabSetComponent.extend({
    click: function(e) {
        console.log("click", e);
    },
    actions: {
        boom: function(e, i) {
            console.log("3333", e, i);
            this.$().css({transition:'width 2s, height 2s, background-color 2s, transform 2s'});
        }
    }
});
App.ScrollableComponent = Em.Component.extend({
    
})