Reputation: 15608
My model "content.id" contains a string, e,g "123":
{{view Em.TextArea idBinding="content.id"}}
Instead of just setting the id of this view to "123", I'd like it to be "message-123", basically customizing the string being used. Sadly, Ember does not allow bindings to be functions, which would solve my problem (I could define such a function on the controller).
What's the best way to achieve this?
Upvotes: 1
Views: 2893
Reputation: 10726
You could define a computed property in the controller (or elsewhere):
The controller
MyApp.ApplicationController = Ember.Controller.extend({
content: "a-content",
editedContent: function() {
return "message-" + this.get('content');
}.property('content')
});
The view
MyApp.FooView = Ember.View.extend({
tagName: 'p'
});
The template (where content is a String
, here)
{{#view MyApp.FooView elementIdBinding="editedContent"}}
{{content}}
{{/view}}
And the JSFiddle is here.
EDIT
How can the view see the property
editedContent
since it belongs on theApplicationController
controller?
The router, after started, automatically render the ApplicationView
, or its template when there is no ApplicationView
defined. If you want more detail, I suggest you to read the Ember guide: Understanding the Ember.js Router: A Primer.
And {{editedContent}}
directly get the controller editedContent
property, because the default view context is its controller, as you can read in Ember Blog - 1.0 Prerelease:
The
{{#view}}
helper no longer changes the context, instead maintaining the parent context by default. Alternatively, we will use the controller property if provided. You may also choose to directly override the context property. The order is as follows:
- Specified controller
- Supplied context (usually by Handlebars)
- parentView's context (for a child of a ContainerView)
Upvotes: 3