###前提・実現したいこと
knockout.jsを使用してwebアプリケーションを開発しています。
やりたいオペレーションとしてはあるHTML要素をjqueryのclone()を使用してコピーし、
コピーした要素を追加し、追加した要素に対してknockout.jsのViewModelをバインドさせたいです。
動的に増えた要素に対してViewModel新たに作成しバインドさせる方法はありますでしょうか?
###該当のソースコード
HTML
1以下はサンプルになります。余計な属性などは省略しています。 2<div data-bind="with: $root.id_1_0"> 3 <div id="id_1_0" name="Table" data-bind="style: { top: Y() + 'px', height: Height() + 'px' }"> 4 <div data-bind="with: $root.id_2_0"> 5 <div id="id_7_1" name="Row1" data-bind="style: { top: Y() + 'px', height: Height() + 'px' }"> 6 <div data-bind="with: $root.id_8_1"> 7 <input data-bind="value: Value" name="TextField" type="text">
ko.applyBindings()は以下のようにしております。
ViewModelはwithで管理したい要素分作成しています。
上記のHTMLの場合、Table、Row1、TextFieldに対応するViewModelを作成しています。
TypeScript
1let viewModels: any = {}; 2for (バインドさせたい要素数だけViewModelを作成) { 3 let viewModel = new ViewModel(); 4 let key = id_X_X; 5 viewModels[key] = viewModel; 6} 7 8// ViewModelをバインディング 9ko.applyBindings(viewModels);
###発生している問題・エラーメッセージ
上記の状態から、Row1の要素をJQuery.clone(true)でコピーし、弟要素として追加し新しくViewModelを作成し
バインドさせたいのですが、その方法がわかりません。
上記のスクリプトと同様にバインドさせると以下のエラーメッセージが出力されてしまいます。
You cannot apply bindings multiple times to the same element.
###補足情報(言語/FW/ツール等のバージョンなど)
knockout.js 3.4
jquery2.2.4
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。