EmberJS Observing a template field from another controller
Let's start with this basic setup.
App = Ember.Application.create();
App.Router.map(function() {
this.resource('bakery', {path:'/bakery'}, function() {
this.resource('goodies',{path:':bakery_name'})
})
});
App.BakeryRoute = Ember.Route.extend({
model: function() {
return {name:'Yummy Land'};
},
afterModel: function() {
this.transitionTo('goodies',this.model().name);
}
});
App.GoodiesRoute = Ember.Route.extend({
model: function() {
return [{name:'Eclair'},{name:'Donut'},{name:'Oatmeal Cookie'}];
}
});
At this point we have some data and some resources defined.
let's say that our 'bakery' template has a search field in it and
we want to access it from our 'goodies' controller.
<script type="text/x-handlebars" id="bakery">
At {{#link-to 'goodies' name}}"{{name}}" {{/link-to}}
<br/>
<!-- here is our search field -->
{{input type='text' value=searchText}}
{{outlet}}
</script>
<script type="text/x-handlebars" id="goodies">
You see the following goodies:
<ul>
{{#each item in model}}
<li>{{item.name}}</li>
{{/each}}
</ul>
</script>
Ember provides us a faculty named 'needs' that works like below.
When another controller 'bakery' is referenced according to 'needs' it becomes
accessible via the namespace path 'controllers.bakery' and it's properties internally
become available.
The 'needs' faculty can be used with observes.
App.BakeryController = Ember.ObjectController.extend({
})
App.GoodiesController = Ember.ArrayController.extend({
needs: "bakery",
searchFilter: function() {
Ember.Logger.debug("someone is looking for " + this.get("controllers.bakery.searchText"))
}.observes("controllers.bakery.searchText")
})
Written by Curtis Schofield
Related protips
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Emberjs
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#