未删除KnockoutJS必需/禁用的属性 [英] KnockoutJS Required / Disabled attributes not removed
问题描述
所以我有一个淘汰赛原型,您可以在其中动态添加输入,然后设置各自的设置.将其视为表单构建者就是这样.但是,我注意到禁用和必需项效果不佳.它将值设置为禁用或必需,但是当我将其设置为false时,它仍保留在元素上而没有其状态,从而使其仍然起作用.请任何人可以帮助或提供指导.
So I have a knockout prototype where you add inputs dynamically and then set each of their own settings. Think of its as a form builder is such. However, I noticed that disabled and required doesn't work that great. It sets the value to disabled or required but when I turn it into false it still remains on the element without its state, causing it to still function. Please can anyone help or give guidance.
HTML
<div class="leftpanel">
<div class="input-row" data-bind="foreach: inputItems">
<div class="input-row-item">
<div class="input-item">
<label data-bind="text: label"></label>
<input data-bind="attr:{ name: name, placeholder: placeholder, disabled: disabled, value: value, type: type }">
</div>
<div class="input-settings">
<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>
</div>
</div>
<div class="rightpanel">
Here be draggables!
<br/>
<button data-bind="click: addInput">ADD TEXT INPUT</button>
</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());
};
}
ko.applyBindings(new ViewModel());
});
推荐答案
You better use Knockout's own built-in disable
binding-handler:
<input data-bind="disable: disabled, attr: { name: name, placeholder: placeholder, value: value, type: type }" />
请参见小提琴
或者,您可以检查条件中是否存在明显的真实性",以便如果不满足条件,淘汰赛将删除该属性.例如:
Alternatively, you can check for explicit 'truthfulness' in your condition so that Knockout will remove the attribute if the condition is not met. For example:
<input data-bind="attr: { disabled: disabled() === 'true', ...}" />
请参见此小提琴(在已禁用"输入中键入"true"以激活disabled
).
See this Fiddle (type 'true' in the 'disabled' input to activate disabled
).
这篇关于未删除KnockoutJS必需/禁用的属性的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!