0

contenteditable div を使用して、非常に単純なことを実現したいと考えています。次の簡単な例を見てみましょう。

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

div の内容を編集するときに MyApp.president.fullname の値を変更したい。Emberにはそれを行う方法がありますか？それとも、div のコンテンツの変更を観察し、Ember.set でプロパティを設定する必要がありますか?

WYSIWYG エディターを構築するには、これらすべてが必要です。

4

1 に答える 1

2

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);
    }
  });
于 2012-10-25T10:41:44.320 に答える