我想綁定ViewModel到一個HTML元素動態增加knockout.js

Question

作爲一個你想要做的操作，複製一個HTML元素使用jquery clone（） 我想添加複製的元素並綁定knockout的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（真）的元素，將其添加爲同級元素，創建一個新的視圖模型 我要綁定它，但我不知道該怎麼做。 如果您像上面的腳本那樣綁定它，則會輸出以下錯誤消息。

不能多次申請綁定同一個元素。

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>