Accessing the Ember view within a #with helper

Question

I'm seeing strange behavior when I attempt to access view elements from within a #with helper. Maybe this is expected, but looking through the Changelog for the latest Ember versions, I'm not finding anything that I expect to cause this behavior.

Here's my toy template:

{{#with model as "bar"}}
  <label {{bind-attr for="view.inputField.elementId"}}>My Label</label><br/>
  {{input type="text" viewName="inputField" valueBinding="bar"}}<br/><br/>
  The id for the input field is {{view.inputField.elementId}}
{{/with}}

For Ember 1.6.1, the input field id is correctly displayed and the label's for attribute is set correctly.

For Ember 1.7.1, rendering fails entirely because "Uncaught Error: Assertion Failed: Cannot call get with 'inputField.elementId' on an undefined object"

For Ember 1.8.1, the page is rendered, but the input field id isn't displayed and the label's for attribute isn't set.

For Ember 1.9.0-beta.1 we're back to the behavior in Ember 1.6.1.

Here are jsbins for each ember version:
Ember 1.6.1 -- http://jsbin.com/lozape/4/edit
Ember 1.7.1 -- http://jsbin.com/xicove/1/edit
(I'm a SO noob, so I'll have to add my other jsbins in a comment, I guess)

What should I expect to be happening here? Is the behavior in 1.7 and 1.8 buggy, and a fix was put in for 1.9? Is there a workaround to get this to work correctly in 1.8?

1.8 jsbin jsbin.com/nuliyo/1/edit and 1.9 jsbin jsbin.com/cagula/1/edit — shawnam

locks locks · Accepted Answer · 2015-02-26T11:53:39

First of all, a quick note: valueBinding="bar" is legacy syntax. You should generally be doing value=bar to dynamically bind value to bar.

I trawled the bug reports and the most relevant one seems to be https://github.com/emberjs/ember.js/issues/5348.
I'm not sure why it would only be fixed in 1.9, but maybe it's related to these deprecations.

A suggestion to avoid having to specify a for attribute is to put the input inside the label:

{#with model as "bar"}}
  <label>My Label
    {{input type="text" viewName="inputField" value=bar}}<br/><br/>
  </label><br/>
{{/with}}

You could also try using a component to incapsulate that portion of template instead of using the {{with}} helper.

Accessing the Ember view within a #with helper

1 Answers