Ember で動的フォームを実装しようとしています。ユーザーがドロップダウンからオプションを選択してフォームに追加できるようにしたい。また、追加された各フィールドには、フォームから要素を削除する「x」が必要です。
動作するように見えるもの(JSFiddle)をまとめましたが、追加されたフォーム要素が削除される (その横の x がクリックされる) たびに、コンソールに次のようなエラーが表示されます。 '未定義の」。
「a」タグに付いているハンドルバーの「アクション」ヘルパーと何か関係があるのではないかと思います。よくわかりませんが。
挿入された入力要素の横にある「x」がクリックされたときに呼び出される削除関数のサンプルを次に示します。
deleteOption: function (event) {
this.removeChild(event);
this.rerender();
},
これは、新しい入力要素が追加されたときに使用される「newOption」ビューのテンプレートです (「+」ボタンをクリックした後)。
<script type="text/x-handlebars" data-template-name="newOption">
<p>
<label {{bindAttr for="view.name"}}>{{view.label}}</label>
<br /><input class="input-medium option" {{bindAttr id="view.name" name="view.name"}} type="text" maxlength="5" />
<a href="#" class="delete addsub" {{bindAttr id="view.name"}} {{action deleteOption view target="view.parentView" }}>X</a>
</p>
</script>