CODEWITHSUNDEEP
ember.js
Cedric Beust
Cedric Beust

Reputation: 15608

How can I bind the element ID for an Ember View?

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

Answers (1)

lcoq
lcoq

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

Upvotes: 3

Related Questions