1

emberjs では、テンプレート ファイルにコードを追加できます。

{{input type="text" value=color}}

テンプレートがレンダリングされます。しかし問題は、テンプレートがレンダリングされた後にこれを動的に追加するにはどうすればよいかということです。たとえば、ボタンを追加して新しい入力フィールド (色) を生成したいのですが、ユーザーは必要に応じて新しい色を追加し続けることができますか? これを行うにはどうすればよいでしょうか？

4

1 に答える 1

2

まず第一に、ユーザーに色の別の入力を追加させたい場合は、何らかのアクションでユーザー入力の値にアクセスしたいと思うでしょう。したがって、その値を格納するバインディングを作成する必要があります。

それらをある種の配列に格納する必要があるとしましょうcolors。この配列には、最初は 1 つのオブジェクトのみが含まれ、ユーザーがルートに入ると自動的に追加されます。この設定 (例:setupControllerルート内のフック) は次のようになります。

setupController: function(controller, model) {
  controller.set("colors", []);
  controller.get("colors").pushObject({ value: "" });
}

そして、コントローラのアクションによってボタンのクリックを処理しましょう:

actions: {
  handleClick: function() {
    this.get("colors").pushObject({ value: "" });
  }
}

次に、テンプレートは次のようになります。

{{#each color in colors}}
  {{input type="text" value=color.value}}
{{/each}}

メソッドを使用しpushObjectて、バインディングに準拠したプッシュを行います。何かを配列にプッシュするたびcolorsに、テンプレートは自動的に再レン​​ダリングしinput、適切にバインドされた別のフィールドを挿入します。そのおかげで、他のアクション (送信など) で、ユーザーが提供したすべての値にアクセスして、必要に応じて処理できます。valuecolor.value

于 2015-05-19T07:40:28.333 に答える