Skip to content

Instantly share code, notes, and snippets.

@tomdale
Created April 26, 2012 01:10
Show Gist options
  • Save tomdale/2494968 to your computer and use it in GitHub Desktop.
Save tomdale/2494968 to your computer and use it in GitHub Desktop.
Ember.js View Context Change

View Context Changes

The rules for how Ember.js evaluates Handlebars templates have recently changed, and you may need to update your application's templates to ensure they continue working..

Template Contexts

Remember that a template is always evaluated against a context object. When you render a template, values are looked up from that object. For example:

Hello, {{firstName}} {{lastName}}!

The firstName and lastName properties are looked up on the context object for this template. If our context was the following object:

{
  firstName: "Clark",
  lastName: "Gable"
}

The template would render:

Hello, Clark Gable!

Inside a template, helpers can alter the context inside blocks. Two helpers that change context are {{#with}} and {{#each}}, which change the context to the specified object or to each item in an enumerable, respectively.

Previously, Ember.js' {{#view}} helper would also change the context of the template inside it. For example, imagine we changed the above example to be wrapped inside a {{#view}} helper, so it read like this:

{{#view App.WelcomeView}}Hello, {{firstName}} {{lastName}}!{{/view}}

You may be surprised to learn that this would render the string "Hello, ", because it is trying to look up the firstName and lastName properties on the view instead of the parent context!

In more recent versions of Ember.js, this will now work as expected and render Hello, Clark Gable!. If you really want to refer to a property of the view, you can use the view keyword to lookup a value on the current scope's view:

{{#view App.WelcomeView}}Hello, {{firstName}} {{lastName}}! {{view.currentTime}}{{/view}}

TL;DR

// Before:
{{#each App.photosController}}
  Photo Title: {{title}}
  {{#view App.InfoView contentBinding="this"}}
    {{content.date}}
    {{content.cameraType}}
    {{otherViewProperty}}
  {{/view}}
{{/each}}

// After:
{{#each App.photosController}}
  Photo Title: {{title}}
  {{#view App.InfoView}}
    {{date}}
    {{cameraType}}
    {{view.otherViewProperty}}
  {{/view}}
{{/each}}
@tomdale
Copy link
Author

tomdale commented Jun 29, 2012

@psndcsrv This applies to templates in a different file as well.

@workmanw
Copy link

workmanw commented Jul 3, 2012

I recently went through the process of updating our app to support the "view context changes" to handlebars. I put together some feedback on this change and how it impacted us. Here it is: https://gist.github.com/3042409

@cherifGsoul
Copy link

I want to know if ember is ready for production Iam really confused wit all those changes?!

@darkdarkfruit
Copy link

The topic should appear in websites doc, otherwise confusing a lot.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment