Question

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?

Answer 1

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 the ApplicationController 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)