我想将ViewModel绑定到knockout.js动态增加的HTML元素
我想将ViewModel绑定到knockout.js动态增加的HTML元素
提问于 2017-02-09 01:33:11
作为您想要做的操作，使用jquery ()复制一个HTML元素--我希望添加复制的元素，并将ViewModel of knockout.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 (true)复制Row 1的元素，将其作为兄弟元素添加，创建一个我想绑定的新ViewModel，但我不知道如何实现。如果您像上面的脚本一样绑定它，下面的错误消息将被输出。
不能将绑定多次应用于同一元素。
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-02-09 03:07:26
正如我在评论中提到的，您可能需要组件或模板，而不是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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42126745
复制相关文章
相似问题
腾讯云开发者
