Question

Sorry about the long and convoluted title, but I couldn’t summarize it better.

I have a simple model, with a property foo, initialized to null.

In my view, I don’t want to display an input field when foo is null or "", and have a button that says Add foo.

<a href="#" class="btn" {{action addFoo obj}}> Add foo </a>

{{#if obj.foo}}
  {{view Ember.TextField valueBinding="obj.foo"}}
{{/if}}

Then in my action addFoo, I do:

obj.set('foo', 1);

and that will make the input field appear.

I have two problems with this approach:

1. 1 is really an arbitrary value, it doesn’t have any special meaning in my application.
2. If the user deletes 1 because they want to type 2, the input field will disappear before they have the time to type 2.

Is there a better approach to this kind of user interaction?

Answer 1

I ended up adding a computed property to my model:

fooIsSet: function() { return this.get('foo') !== null }.property('foo')

So that in my handlebars template I could do this:

{{#if obj.fooIsSet}}
  do stuff
{{/if}}

This way I can deal with null only, and '' will act as if the property is set and valid.