Ember.js Base fiddle

by wmarbut

HTML

<script src="https://github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="http://dynamixse.com/inc/javascripts/ember.js"></script>
<script type="text/x-handlebars" data-template-name='app'>
    <span>{{binding1}}</span><br/>
    <span>{{binding2}}</span><br/>

    {{view Ember.TextArea valueBinding="testValue" class="silly-field"}}
    <br/>
    <a href='#' {{action callPlugin target="controller" on="click"}}>Call plugin manually</a>
    <br/>
    <span id='sillyTarget'></span>
</script>

JavaScript

$.fn.doSomethingSilly = function() {
    console.log('called')
        console.log('val: ' + $(this).val());
    $('#sillyTarget').html($(this).val());            
}
 

App = Ember.Application.create({
    ApplicationController: Ember.Controller.extend({
        testValue: 'hi there',
        binding1: 'applesauce',
        binding2: function() {
            var val;
            for (i=0; i< 10000; i++) {
               val = i;          
            }
            return val;
        }.property(),
        callPlugin: function() {
             $('.silly-field').doSomethingSilly();  
        }            
    }),
    ApplicationView: Ember.View.extend({
        templateName: 'app', 

        didInsertElement: function() {
            Ember.run.next(this, function(){ $('.silly-field').doSomethingSilly();})
        }        
    }),
    
    Router: Ember.Router.extend({
        location: Ember.Location.create({implementation: 'hash'})   ,         
        root: Ember.Route.extend({
            route: '/'
        })            
    })
});
App.location = Ember.Location.create({implementation: 'hash'})

App.initialize()