Knockout.js KnockoutJS单选按钮不会像复选框那样更改
对于复选框和单选按钮,我有相同的数据结构。选中复选框时,它们返回正确的布尔值(“已选择”变量) 但是,当我选中单选按钮时,“Selected”总是更改为“value”(整数) 此外,单选按钮在开始时不会被“选中”,即使“已选择”==true Javascript:Knockout.js KnockoutJS单选按钮不会像复选框那样更改,knockout.js,Knockout.js,对于复选框和单选按钮,我有相同的数据结构。选中复选框时,它们返回正确的布尔值(“已选择”变量) 但是,当我选中单选按钮时,“Selected”总是更改为“value”(整数) 此外,单选按钮在开始时不会被“选中”,即使“已选择”==true Javascript: function attributeValueViewModel(data) { var self = this; self.id = ko.observable(data.id); self.attribut
function attributeValueViewModel(data) {
var self = this;
self.id = ko.observable(data.id);
self.attributeID = ko.observable(data.attributeID);
self.value = ko.observable(data.value);
self.chosen = ko.observable(data.chosen);
}
function viewModel() {
var self = this;
self.attributeValues1 = ko.observableArray([]);
self.attributeValues2 = ko.observableArray([]);
self.addToList = function(data) {
ko.utils.arrayForEach(data, function(item) {
self.attributeValues1.push(new attributeValueViewModel(item));
self.attributeValues2.push(new attributeValueViewModel(item));
});
};
}
var arr = [
{
"id": 55,
"attributeID": 28,
"value": "Yes",
"chosen": false,
},
{
"id": 56,
"attributeID": 28,
"value": "No",
"chosen": true,
},
{
"id": 62,
"attributeID": 28,
"value": "Maybe",
"chosen": false,
}
];
var vm = new viewModel();
ko.applyBindings(vm);
vm.addToList(arr);
HTML
<b>Checkbox:</b>
<div id="test1">
<span data-bind="foreach: attributeValues1()">
<input type="checkbox" data-bind="value: id(), checked: chosen, attr: { name: 'test1' }" />
<span data-bind="text: value()"></span>
<span data-bind="text: chosen()"></span>
</span>
</div>
<br />
<b>Radio:</b>
<div id="test2">
<span data-bind="foreach: attributeValues2()">
<input type="radio" data-bind="value: id(), checked: chosen, attr: { name: 'test2' }" />
<span data-bind="text: value()"></span>
<span data-bind="text: chosen()"></span>
</span>
</div>
复选框:
电台:
这是我的小提琴:
您能否解释一下这种行为以及为什么单选按钮不更新布尔值(就像复选框一样)?复选框和单选按钮的行为彼此不同。当单个可观察对象绑定到选中的
时
绑定(与数组相反),它们的行为特别不同
对于复选框,它将始终是一个布尔值,指示是否选中该复选框。简单。如果是数组,将从数组中添加/删除值
但是,对于单选按钮,它将是分配给单选按钮的值。对于单个可观测值,仅当其绑定的值等于该值时,才会将其视为已检查。在您的情况下,您的值绑定到id
,因此仅当所选值等于相应的id时才会响应。对于数组,它将向数组添加/删除值
由于没有其他内容会更改为相应属性选择的值,因此它保持不变
我调整了您的示例以演示该值如何影响选中状态
都写好了,仔细看看
如果您希望它的工作方式与复选框的工作方式类似,那么需要做一些工作才能使其正确。我有一段代码,由于绑定的工作方式以及它们的顺序依赖性如何导致问题,这段代码感觉有点脆弱。你可以试试这个,我只是不确定它有多强大
要使其工作,您需要一个可观察的对象来跟踪实际选中的单选按钮的实际更改。然后您可以订阅对该可观察对象的更改,以更新您选择的可观察对象
ko.bindingHandlers.radiochecked={
init:function(元素、valueAccessor、allBindingsAccessor){
//选中的绑定取决于具有初始值的元素
//我们需要允许首先应用可能设置它的绑定
setTimeout(函数(){
var options=ko.utils.unwrapobbservable(valueAccessor());
if(options.checked()){
选项。选中(元素。值);
}
options.selected.subscribe(函数(newValue)){
选项。已选中(newValue==element.value);
});
applybindingstoode(元素,{checked:options.selected});
}, 0);
}
};
然后将其绑定到单选按钮:
这也可能有帮助。下面的绑定将使用一组单选按钮,在更改其中一个按钮时,将组中所有其他按钮后面的可观察值设置为特定值(null、false、0、…)
目前,它要求可观测值为真/假,以便选择正确的单选按钮
ko.bindingHandlers.checkedRadio = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
$(element).change(function () {
//Get all radio buttons int he group
var group = $(element).attr('name');
var radios = $('input[type="radio"][name="' + group + '"]').not($(element));
//Reset all values for other radio buttons in this group
$.each(radios, function (i, radio) {
var $r = $(radio);
if (!$r.prop('checked')) {
var data = ko.dataFor(radio);
data[allBindingsAccessor().checkedRadioProperty](allBindingsAccessor().checkedRadioValue);
}
});
//Update bound data
var value = valueAccessor();
var checked = $(element).prop('checked');
value(checked);
});
//Select radio button based on bound data
var value = unwrap(valueAccessor());
$(element).prop('checked', value);
}
};
要使用绑定,可以执行以下操作:
<input type="radio" value="true" data-bind="name: 'option-group-' + attributeID() }, checkedRadio: chosen, checkedRadioProperty: 'chosen', checkedRadioValue: false" />
谢谢您的回答。我只想让“选择”为真/假,不管“框”是否被选中——就像复选框一样。另外,如果我添加了一个下拉列表,我希望该值为真/假,无论该值是否在列表中被选中。这是可能的吗?有可能获得这种行为,但需要做一些工作。我有一个可能的解决方案来做你想做的事情,但它似乎非常脆弱,因为应用绑定的顺序未知,以及检查的绑定如何工作。因为这个原因,我有点犹豫是否要分享这个。非常感谢,这正是我想要的。:)