2

私たちが開発しているアプリのビューは既にハンドルバー/エンブレムに記述されており、データはモデルから既に取得されています。

Ember のインライン/インプレースに最適なアプローチを見つけようとしています。問題: 何もクリックされていない場合、データは単なるテキストです。タイプ (日付、プレーン テキスト、アイテムのリスト) に応じてテキストをクリックすると、対応する入力フィールド (日付フィールド、テキスト フィールド、または選択) が置き換えられ、編集できるようになります。

この問題を経験したことがありますか? もしそうなら、あなたの考えを共有してください！

4

1 に答える 1

9

Ember.Componentを使用した 1 つのソリューションを次に示します。

App.InlineEditComponent = Ember.Component.extend({
  actions: {
    toggleEditing: function() {
      this.toggleProperty('isEditing');
    } 
  }
});

テンプレートを使用する場合:

<script type="text/x-handlebars" id="components/inline-edit">
  {{#if isEditing}}
    <form {{action "toggleEditing" on="submit"}}>
      {{yield}}
    </form>
  {{else}}
    <span {{action "toggleEditing"}}>
      {{value}}
    </span>
  {{/if}}
</script>

使用法：

<script type="text/x-handlebars"  data-template-name="index">
  {{#inline-edit value=someProperty}}
    {{input value=someProperty type="date"}}
  {{/inline-edit}}
</script>

デモ: http://emberjs.jsbin.com/OGEnOdA/2/edit

さらに機能を追加することもできます (たとえば、フォーム要素のフォーカス アウトで編集を終了するなど) が、基本的な考え方は理解できたと思います。

于 2013-10-08T19:58:02.593 に答える