ember.js - Ember 双向值绑定到对象属性

Question

我想用一个可内容编辑的 div 来实现一个非常简单的事情。让我们举这个简单的例子：

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

我希望在编辑 div 的内容时更改 MyApp.president.fullname 的值。Ember 有办法做到这一点吗？还是必须观察div内容的变化，用Ember.set设置属性？

我需要这一切来构建一个所见即所得的编辑器。

Answer 1

您应该使用Ember.TextField, 可以双向绑定值：

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

使用文本字段，当您更改时MyApp.president.fullName将更新文本字段。当您更改文本字段的值时，它将更新MyApp.president.fullName。

如果您希望能够编辑任何元素，您可以这样做：

模板：

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

意见：

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

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