KnockoutJS删除动态绑定
KnockoutJS Remove dynamic bindings
在其他人的帮助下,我成功地获得了一个原型,可以动态添加新的输入,并在旁边添加特定的输入设置。然而,我一直在努力掌握如何动态删除我添加的内容。有什么想法吗?
HTML
<div class="input-row" data-bind="foreach: inputItems">
<div class="input-row-item">
<div>
<label data-bind="text: label"></label>
<input data-bind="attr:{ name: name, placeholder: placeholder, disabled: disabled() === 'true', value: value, type: type }">
</div>
<div>
<input type="text" class="nb-remove" data-bind="value: label" placeholder="input label">
<input type="text" value="text" class="nb-remove" data-bind="value: type" placeholder="input type">
<input type="text" class="nb-remove" data-bind="value: name" placeholder="input name">
<input type="text" class="nb-remove" data-bind="value: placeholder" placeholder="input placeholder">
<input type="text" class="nb-remove" data-bind="value: disabled" placeholder="input disabled">
<input type="text" class="nb-remove" data-bind="value: value" placeholder="input value">
</div>
<div>
<button data-bind="click: removeInput">Remove this</button>
</div>
</div>
</div>
JS-
$(function(){
var InputItem = function InputItem(label, type, name, placeholder, disabled, value) {
this.label = ko.observable(label);
this.type = ko.observable(type);
this.name = ko.observable(name);
this.placeholder = ko.observable(placeholder);
this.disabled = ko.observable(disabled);
this.value = ko.observable(value);
}
var ViewModel = function ViewModel() {
var that = this;
this.inputItems = ko.observableArray([]);
this.addInput = function addInput() {
that.inputItems.push(new InputItem());
};
this.removeInput = function removeInput(){
//remove input here
}
}
ko.applyBindings(new ViewModel());
});
您应该尝试类似的东西
视图模型:
var ViewModel = function() {
var that = this;
that.inputItems = ko.observableArray([new InputItem()]);
that.addInput = function () {
that.inputItems.push(new InputItem());
};
that.removeInput = function (item){
that.inputItems.remove(item);
}
}
ko.applyBindings(new ViewModel());
工作小提琴此处
少数建议:
1) 当您分配var that=this
时,您尝试在vm 中一致地使用that
2) 您可以像这样创建一个函数名var fun=function()
,也可以像这样做function fun(){//blah blah}
相关文章:
- 将值动态绑定到jquery中的切换按钮
- 如何使用AnguarJS动态绑定网站数据
- 在extJS 4.2中,有没有一种方法可以将模型值动态绑定到表单
- 我想在ext.js4.2中将树存储动态绑定到树面板中
- 如何让 AngularJS 选取在 JavaScript 中创建的动态绑定
- Emberjs - 将参数动态绑定到视图
- KnockoutJS删除动态绑定
- jquery验证,动态绑定表单验证
- 如何将文件夹中包含的控制器动态绑定到angularjs中的视图
- 在JavaScript中创建动态绑定
- Jquery:如何动态绑定带有onload事件的文本框
- 通过json动态绑定作用域到ng模型
- 如何将变量与函数动态绑定
- jQuery动态绑定文件输入并在函数中检索文件
- 动态绑定onclick事件为for循环中的所有按钮提供相同的值
- typeahead选择事件(jQuery)的动态绑定
- 如何使用 AngularJS 将值动态绑定到链接
- 在jQuery上动态绑定函数
- 将单击事件动态绑定到列表
- 删除动态绑定到未确定元素的侦听器