Ember 1.8 beta 2 error in component: You must use Ember.set() to access this property


#1

I have an issue with a simple component which works fine in Ember 1.7.0:

App.LabelInputComponent = Ember.Component.extend({
	layoutName: 'components/label-input',

	classNames: [],
	labelI18nKey: '',

	labelText: function() {
		return I18n.t(this.get('labelI18nKey'));
	}.property('labelI18nKey')
});

Template:

<label>
	{{labelText}}
</label>

{{input value=value classNames=classNames placeholder=placeholder}}

Used this way e. g.:

{{label-input value=name labelI18nKey="common.name" classNames="width-4"}}

Exception:

Uncaught Error: Assertion Failed: You must use Ember.set() to access this property (of < Ember.TextField:ember1994 >)

It’s related to the classNames property. If I remove classNames=classNames from the template, the component works.

Is this a problem of the beta or my fault?


#2

Solved it using the classNameBindings property of the TextField (input) in the component’s template

...
{{input value=value classNameBindings="inputClassNames" placeholder=placeholder}}

and inputClassNamesas property name in the component itself:

App.LabelInputComponent = Ember.Component.extend({
   ...
   inputClassNames: '',
   ...
});

and using it this way:

{{label-input value=name labelI18nKey="common.name" inputClassNames="width-4"}}