Ember bidirectional value bind to object property

Question

I want to achieve a very simple thing with a contenteditable div. Let us take this simple example:

<script type="text/x-handlebars">
  <div contenteditable>{{MyApp.president.fullName}}</div>
</script>

I want the MyApp.president.fullname's value to change when I edit the content of the div. Does Ember have a way to do that? Or I have to observe the changes of the div's content and set the property with Ember.set?

I need all this to build a WYSIWYG editor.

Answer 1

You should use Ember.TextField , with which you can bind values both ways:

{{view Ember.TextField valueBinding="MyApp.president.fullName"}}

Using a textfield, when you change MyApp.president.fullName will update the textfield. When you change the value of the textfield it will update MyApp.president.fullName .

If you want to be able to edit any element you can do it like this:

Template:

{{#if MyApp.isEditing}}
  {{view App.InlineTextField valueBinding="MyApp.president.name"}}
{{else}}
  {{#view App.TextView}}
    {{MyApp.president.name}}    
  {{/view}}
{{/if}}

Views:

  App.InlineTextField = Ember.TextField.extend({
    focusOut: function() {
      MyApp.set('isEditing', false);
    }
  });

  App.TextView = Ember.View.extend({
    doubleClick: function() {
      MyApp.set('isEditing', true);
    }
  });