动态单选按钮绑定选中属性是动态的
Dynamic Radio button bind checked property is dynamic
首先,我是淘汰/javascript 的新手,我目前正在处理一个"未完成"项目,我正在创建一个"动态选项",问题是我的 ViewModel 绑定到我的 ItemModel(其中包含 5 个属性 HS01 - HS02 - HS03 - HS04 - HS05),当选择选项框时需要绑定。已检查:$parent。(动态属性)似乎不起作用。
下面是代码示例。
.HTML
<input data-bind="value: HS01" />
<table class="table table-condensed">
<tbody data-bind="foreach: HealthAndSafety">
<tr>
<td class="col-xs-9">
<span data-bind="html: contenu"></span>
<!-- ko if: $data.id == 'HS01' -->
<br/>
<ul style="list-style-type: disc">
<!-- ko foreach: $root.HealthAndSafetyChild -->
<li data-bind="text: $data.contenuChild"></li>
<!-- /ko -->
</ul>
<!-- /ko -->
</td>
<!--<div style="border: 3px red dashed;">-->
<td class="col-xs-2">
<input type="radio" data-bind="attr:{value:id,name:group,checked: checkedProperty} , checkedValue: 0"/>
<input type="radio" data-bind="attr:{value:id,name:group,checked: checkedProperty} , checkedValue: 1"/>
</td>
</tr>
</tbody>
</table>
JavaScript(视图模型)这里是每个UL有多个Li等......那么它们只有1个绑定到父视图模型的是/否单选按钮
m.HealthAndSafety = ko.observableArray([
{ id: 'HS01', group: 'HS01Group', checkedProperty: '$parent.HS01', contenu: f.lang('HealthSafety01') },
{ id: 'HS02', group: 'HS02Group', checkedProperty: '$parent.HS02', contenu: f.lang('HealthSafety02') },
{ id: 'HS03', group: 'HS03Group', checkedProperty: '$parent.HS03', contenu: f.lang('HealthSafety03') },
{ id: 'HS04', group: 'HS04Group', checkedProperty: '$parent.HS04', contenu: f.lang('HealthSafety04') },
{ id: 'HS05', group: 'HS05Group', checkedProperty: '$parent.HS05', contenu: f.lang('HealthSafety05') }]);
m.HealthAndSafetyChild = ko.observableArray([{ idChild: 'HS01_1', contenuChild: f.lang('HealthSafety01_1') }, { idChild: 'HS01_2', contenuChild: f.lang('HealthSafety01_2') }, { idChild: 'HS01_3', contenuChild: f.lang('HealthSafety01_3') }, { idChild: 'HS01_4', contenuChild: f.lang('HealthSafety01_4') }, { idChild: 'HS01_5', contenuChild: f.lang('HealthSafety01_5') }, { idChild: 'HS01_6', contenuChild: f.lang('HealthSafety01_6') }]);
当我发布我的模型以更新数据库时,属性 HS01 等为空且未绑定。我已经测试了多个案例,但我不知道如何将我的可观察数组(检查属性)绑定到选中的属性。
我也试过
<input type="radio" data-bind="attr:{value:id,name:group} checked: (checkedProperty / #data.checkedProperty) , checkedValue: 0"/>
我在 Stackoverflow 上找到的所有示例都绑定到只有一个属性
谢谢!
编辑1http://jsfiddle.net/grosjambon/azz3tpfy/7/
编辑2找到了一种更清洁的方法来解决我的问题,仍然不是完全最佳的,但对我在 html 中具有多个 If 条件的另一个更好。在实施罗伊答案时
.HTML
<div style="border: 3px red dashed;">
<label class="radio-inline">
<input type="radio" data-bind="attr:{name:id}, checked: checkedProperty, checkedValue: '1',event: {change : $root.onInputChangeUpdateVMHSProperty }" />
Yes
</label>
<label class="radio-inline">
<input type="radio" data-bind="attr:{name:id}, checked: checkedProperty, checkedValue: '0' ,event: {change : $root.onInputChangeUpdateVMHSProperty }" />
No
</label>
</div>
JavaScript
m.onInputChangeUpdateVMHSProperty = function (item) {
switch (item.id) {
case "HS01":
m.HS01(item.checkedProperty());
break;
case "HS02":
m.HS02(item.checkedProperty());
break;
case "HS03":
m.HS03(item.checkedProperty());
break;
case "HS04":
m.HS04(item.checkedProperty());
break;
case "HS05":
m.HS05(item.checkedProperty());
break;
}
};
主要问题:
- 不要使用
checked
属性,请使用checked
绑定 checkedProperty
本身应该是可观察量,而不是可观察量的名称
因此,数组的元素将如下所示:
{
id: 'HS01',
group: 'HS01Group',
group2: 'HS01Group2',
checkedProperty: ko.observable(),
contenu: 'test1'
}
您的输入行将是:
<div data-bind="foreach: HealthAndSafety">
<span data-bind="text: $index"></span>
<input data-bind="value: checkedProperty" />
</div>
单选按钮如下所示:
<input type="radio" data-bind="attr:{name:id}, checked: checkedProperty, checkedValue: '0'" />
function SeatReservation(name, initialMeal) {
var self = this;
self.name = name;
self.meal = ko.observable(initialMeal);
}
// Here's my data model
var ViewModel = function() {
var self = this;
self.HealthAndSafety = ko.observableArray([{
id: 'HS01',
group: 'HS01Group',
group2: 'HS01Group2',
checkedProperty: ko.observable(),
contenu: 'test1'
}, {
id: 'HS02',
group: 'HS02Group',
group2: 'HS02Group2',
checkedProperty: ko.observable(),
contenu: 'test2'
}, {
id: 'HS03',
group: 'HS03Group',
group2: 'HS03Group2',
checkedProperty: ko.observable(),
contenu: 'test3'
}, {
id: 'HS04',
group: 'HS04Group',
group2: 'HS04Group2',
checkedProperty: ko.observable(),
contenu: 'test4'
}, {
id: 'HS05',
group: 'HS05Group',
group2: 'HS05Group2',
checkedProperty: ko.observable(),
contenu: 'test5'
}]);
};
ko.applyBindings(new ViewModel()); // This makes Knockout get to work
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div>
<h1>
Just testing if the property get binded when u click a radioButton
</h1>
<h1>
Example that works now
</h1>
<div data-bind="foreach: HealthAndSafety">
<span data-bind="text: $index"></span>
<input data-bind="value: checkedProperty" />
</div>
<table>
<tbody data-bind="foreach: HealthAndSafety">
<tr>
<td class="col-xs-2">
<input type="radio" data-bind="attr:{name:id}, checked: checkedProperty, checkedValue: '0'" />
<input type="radio" data-bind="attr:{name:id}, checked: checkedProperty, checkedValue: '1'" />
</td>
</tr>
</tbody>
</table>
</div>
相关文章:
- Google Closure Advanced |无法识别对象属性|动态属性
- 如何从动态属性将IMG插入DOM
- 将动态属性添加到对象末尾
- 将动态属性从 ADF 传递到 JavaScript
- 动态属性名称串联
- 具有角度的动态属性
- 在挖空JS中从ATTR调用模型函数以获取动态属性
- 按动态属性值选择聚合物元素
- 对象中的动态属性名称
- 拖放区将动态属性追加到 #dz 删除
- 如何在 jQuery 小部件中使用动态属性值
- 在 Jquery/Javascript 中访问动态属性名称
- 创建具有动态属性的对象数组
- 如何在车把/Ember.js中插入动态{{属性}}
- 如何使用动态属性访问对象
- 动态属性对象 - JSON
- 角度控制器的动态属性
- 将动态属性名称添加到选择中
- JavaScript:如何迭代一个对象的属性,并针对另一对象的动态属性进行测试
- 表单动态属性更改和提交不起作用