Emberjs - Disable and Enable TextField

Question

So I've recently found the disabled attribute in the Em.TextField, however I can't seem to re-enable the TextField after I've extended it with the disabled property set to true.

var app = Em.Application.create();
app.randomObj = Em.Object.create({
    temp: null
});
app.textField = Em.TextField.extend({
    valueBinding: 'app.randomObj.temp',
    disabled: true
});

How do I remove the disabled property with Ember?

Answer 1

There are some issues with your sample code, I'll adress each one and hope I can clear some things up.

Naming Convention

First of all you should have a look at the Emberist post about naming conventions: Classes should be named UpperCase and instances lowerCase - exception for applications and namespaces. So in your provided JSFiddle in your comment it's App.controller and App.ATextField.

Declaring App as global variable

You are creating an instance of an Ember.Application and assigning it to var app. Although you should be careful when using global variables, in this case you should define your application on the global namespace, so it should be App = Ember.Application.create(); respectively window.App = Ember.Application.create();. By declaring the app as global variable, you can use the powerful Bindings feature in your templates and your JS code.

Bindings

The bindings should be declared on instances and not on classes. By this I mean you wouldn't define the valueBinding of your App.TextField in your class definition but rather move this to the concrete instance, for example in the template.

In your provided JSFiddle in your comment your binding to the controller does not work because you don't use one: to create a binding to a specific controller/object/... you'll have to declare the property name you want to bind to and append a Binding String. So it would be disabledBinding: 'App.controller.shouldDisable'.

---

Example

I've refactored your code, see http://jsfiddle.net/pangratz666/pLpKV/:

Handlebars:

{{view Ember.TextField
    valueBinding="App.tempObj.hold"
    disabledBinding="App.controller.shouldDisable"}} {{App.tempObj.hold}}

JavaScript:

App = Em.Application.create();

App.controller = Em.Object.create({
    shouldDisable: true
});

App.tempObj = Em.Object.create({
    hold: "initial value"
});

// just to illustrate how to define bindings outside of templates,
// we're adding a TextField with bindings setup the same as for the
// template
Ember.TextField.create({
    valueBinding: 'App.tempObj.hold',
    disabledBinding: 'App.controller.shouldDisable'
}).appendTo('body');

Answer 2

Bind it to a controller, and you can toggle it at will. Disabled is a bound attribute, so when the property changes, the template will update.