Я хочу привязать ViewModel к элементу HTML, динамически увеличенному с помощью knockout.js

Question

Как операцию, которую вы хотите сделать, скопируйте элемент HTML с помощью jquery clone() Я хочу добавить скопированный элемент и связать 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); 

Скопируйте элемент строки 1 с JQuery.clone (правда), добавьте его в качестве родственного элемента, создать новый 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>