4

display-me というコンポーネントがあります。次のように、そのコンポーネントに複数の呼び出しを追加することにより、jsfiddleに示されているように、同じテンプレートに同じコンポーネントを複数追加できます。

  <script type="text/x-handlebars" data-template-name="index">
     {{display-me  action='add'}}
     {{display-me  action='add'}}
  </script>

ただし、私が望むのは、上記のように手動で追加するのではなく、ボタンをクリックしてコンポーネントの 2 番目のエントリを追加できる状況です。

このアクションをインデックス ルートに追加しましたが、機能しません。

 App.IndexRoute = Ember.Route.extend({
    actions: {
      add: function(){   

        var comp = App.__container__.lookup("component:display-me");

        //var comp = App.DisplayMeComponent.create();

        //comp.appendTo(".test");
        //comp.appendTo('#input'); 

        Ember.$(".test").append($('<div> {{display-me  action="add"}} </div>'));

      }
    }
  });

ここに完全なjsfiddleがあります

4

1 に答える 1

9

複数の入力を生成するには、テンプレートに each ループが必要です。

each ループで何かを繰り返すには、範囲を作成します。これは、必要な入力数と同じ数の要素を持つ配列です。

http://emberjs.jsbin.com/defapo/2/edit?html,js,output

ただし、すべての入力が同じ値にバインドされるため、これはほとんど意味がありません。

異なる値を設定するには、値の配列を作成して入力します。

names: ['James'],

actions: {
  add: function() {
    this.get('names').pushObject('John Doe');
  }
}

{{#each names key="@index" as |name|}}
  <p>  {{input value=name}} </p>
{{/each}}

そのほうがいいのですが、Ember では生の文字列を操作するのに苦労するでしょう。1 つの例は、この奇妙なものが必要だということですkey="@index"。

生の文字列の代わりに、オブジェクトを操作します。

  people: [ Ember.Object.create({name: 'James'}) ],

  actions: {
    add: function(){   
       this
         .get('people')
         .pushObject(Ember.Object.create({name: 'John Doe'}));
    }
  }

{{#each people as |person|}}
  <p>  {{input value=person.name}} </p>
{{/each}}

デモ: http://emberjs.jsbin.com/defapo/3/edit?html,js,output

改善のための次のステップは、Ember Data を使用することです。バックエンドで名前のリストを永続化するために名前を収集している可能性があり、Ember Data はそれを行う方法です。

于 2015-07-18T22:57:14.077 に答える