Can't bind to global data structures in Ember anymore?
I have used some Ember objects in my code like "App.SelectedBlock" to access selected items in lists (a practice that started when I used Sproutcore many years ago) and now it looks like binding to these objects from Handlebars templates would be deprecated and I'm not sure how to do it. I am running Ember 1.8.1 and it will still work for now, but I get "DEPRECATION: App.SelectedBlock global search from Handelbars template is deprecated". and I'm pretty sure it was completely removed in 1.9.0. I'm not sure how to fix this without completely rebuilding my code. Any suggestions?
source to share
I think you are doing something like:
{{App.SelectedBlock.id}}
You cannot call global variables inside the Handlebars template. This is bad practice. But you can do something like this:
// in your template controller
selectedBlock: function(){
return Ember.get('App.SelectedBlock');
}.property('App.SelectedBlock')
In hbs template:
{{selectedBlock.id}}
source to share
You can create a property on the controller and use that instead of searching App.SelectedBlock
globally
App = Ember.Application.create();
App.ApplicationController = Ember.ObjectController.extend({
programmers: function(){
return App.SelectedBlock.get('programmers');
}.property()
});
App.SelectedBlock = Ember.Object.create({
programmers: [
{firstName: "Yehuda", id: 1},
{firstName: "Tom", id: 2}
]
});
Then in the template, you can:
<script type="text/x-handlebars">
<h2>Welcome to Ember.js</h2>
{{view "select"
content=programmers
optionValuePath="content.id"
optionLabelPath="content.firstName"}}
</script>
See a working example here
source to share