Ember Calling Controller Functions from outside
Includes Ember.1.0.0-rc.3, Handlebars.1.0.0.rc.3
by amindunited
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.3/ember.js"></script>
<script type="text/x-handlebars" data-template-name="application">
ChocolateShopApp
{{render chocolateShop}}
</script>
<script type="text/x-handlebars" data-template-name="chocolateShop">
<h1>In the shop</h1>
{{render chocolateBox}}
</script>
<script type="text/x-handlebars" data-template-name="chocolate">
<h1>I'm a chocolate</h1>
</script>
JavaScript
//Create application core
window.App = Em.Application.create();
App.ApplicationController = Em.Controller.extend();
App.ApplicationRoute = Ember.Route.extend()
App.ApplicationView = Em.View.extend();
App.ChocolateShop = Em.Object.create()
App.ChocolateShopController = Em.Controller.extend()
App.ChocolateShopView = Em.View.extend()
App.ChocolateBox = Em.Object.extend();
App.ChocolateBoxController = Em.Controller.extend({
init: function(){
/* SOF This is the "listener" (the function that you want to call) */
Ember.Instrumentation.subscribe("addAChocolate", {
before: function(eventName, eventTime, data){
console.log("before has ", eventName, eventTime, data);
},
after: function(){
}
})
/* EOF */
},
addChocolatesToBox: function(chocolatesArray){
}
})
App.ChocolateBoxView = Em.CollectionView.extend({
contentBinding : 'App.ChocolateBox.content',
itemViewClass : 'App.ChocolateView'
})
App.Chocolate = Em.Object.create();
App.ChocolateController = Em.Controller.extend();
App.ChocolateView = Em.View.extend({
templateName: 'chocolate'
});
$(function(){
Em.run.later(function(){
/* This is where / how we call the function from outside of the Application */
Ember.Instrumentation.instrument("addAChocolate", {name: 'sea_salt', price:'2.50'});
// EOF
}, 1000)
})