Question

我想用一个满足的div来实现一个非常简单的事情。让我们举个这个简单的例子：

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

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

我需要所有这些来构建WYSIWYG编辑器。

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);
    }
  });

Ember双向值绑定到对象属性

1 个答案: