ViewModelをknockout.jsで動的に増やしたHTML要素にバインドしたい

Question

操作を行いたい場合、jquery clone（）を使用してHTML要素をコピーします。 コピーした要素を追加し、ノックアウトのViewModelをバインドします。 jsを追加要素に追加します。 動的に増加する要素のためにViewModelを新しく作成しバインドする方法はありますか？

HTML

<div data-bind="with: $root.id_1_0"> 
    <div id="id_1_0" name="Table" data-bind="style: { top: Y() + 'px', height: Height() + 'px' }"> 
    <div data-bind="with: $root.id_2_0"> 
     <div id="id_7_1" name="Row1" data-bind="style: { top: Y() + 'px', height: Height() + 'px' }"> 
     <div data-bind="with: $root.id_8_1"> 
      <input data-bind="value: Value" name="TextField" type="text"> 

はJavaScript

let viewModels: any = {}; 
    for (Create ViewModel for the number of elements you want to bind) { 
    let viewModel = new ViewModel(); 
    let key = "id_X_X"; 
    viewModels[key] = viewModel; 
    } 
    ko.applyBindings(viewModels); 

コピーJQuery.cloneと行1の要素（真）、兄弟要素として追加し、私はバインドする新しいViewModelに を作成しかし、私はそれを行う方法を知らない。 上記のスクリプトのようにバインドすると、次のエラーメッセージが出力されます。

同じ要素に複数回バインディングを適用することはできません。

Answer 1

私のコメントに記載されているように、おそらくjqueryクローンとは対照的にコンポーネントまたはテンプレートが必要です。以下は、コンポーネントを使用した例です。

ko.components.register('form-input', { 
 
    viewModel: function(params) { 
 
     this.inputValue = params.value; 
 
     this.label = params.label 
 
     this.id = params.id 
 
    }, 
 
    template: 
 
     '<div data-bind="css: "form-group">\ 
 
      <label class="control-label col-sm-2" \ 
 
      data-bind ="attr: {for: id}"> \ 
 
      <span data-bind="text: label"></span>:</label>\ 
 
       <div class="col-sm-9">\ 
 
       <input type="text"\ 
 
       class="form-control"\ 
 
       data-bind="textInput: inputValue, attr: {id: id}"/> \ 
 
       </div>\ 
 
      </div>' 
 
}); 
 

 
function componentData(val){ 
 
var self = this; 
 
this.val = ko.observable(val); 
 
} 
 

 
function model() { 
 
    var self = this; 
 
    this.componentDataList = ko.observableArray(''); 
 
    this.numOfComponents = ko.observable(''); 
 
    this.generateComponents = function() { 
 
    self.componentDataList.removeAll(); 
 
    for (i = 0; i < self.numOfComponents(); i++) { 
 
     self.componentDataList.push(new componentData(i)); 
 
    } 
 
    } 
 
} 
 

 
var mymodel = new model(); 
 

 
$(document).ready(function() { 
 
    ko.applyBindings(mymodel); 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
    <input class="form-control" 
 
    type="number" 
 
    data-bind="value: numOfComponents" 
 
    placeholder="enter number of inputs you want"> 
 
    <button type="button" class="btn btn-info" data-bind = "click: generateComponents"> Go </button> 
 
    </button> 
 
    
 
    
 
    <div data-bind="foreach: componentDataList" > 
 
    <form-input 
 
    params="value: val, 
 
      label: 'Input' + $index(), 
 
      id: 'datepicker' + $index() "> 
 
    </form-input> 
 
    </div>