构建淘汰模型并动态查看,不设置单选按钮
Build knockout model and view dynamically, radio buttons not being set
我正在使我之前的一个问题完全动态,因为模型是根据服务器数据构建的,视图通过淘汰ko foreach
功能在视图模型中循环。
我面临的问题是:
-
单选选项不与设置的值保持一致,即我单击操作系统,然后选择数据库选项,然后操作系统设置消失。
-
当依赖选项发生变化时(即,当操作系统发生变化时,DB应返回到第一个选项,无),依赖选项(在本例中为数据库和集群)的初始选择不会被选中。
我的小提琴在这里我认为问题要么与下面的代码有关:
computedOptions.subscribe(function () {
var section = this;
console.log("my object: %o", section);
section.selection(section.options()[0].sku);
},section);
或者我的视图绑定:
<!-- ko foreach: selectedOptions -->
<h3><span data-bind="text: description"></span></h3>
<table class="table table-striped table-condensed">
<thead>
<tr>
<th colspan="2" style="text-align: left;">Description</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<!-- ko foreach: options -->
<tr>
<td><input type="radio" name="$parent.name" data-bind="checkedValue: $data, checked: $parent.selection" /></td>
<td style="text-align: left;"><span data-bind="text: name"></span></td>
<td style="text-align: left;"><span data-bind="text: price"></span></td>
</tr>
<!-- /ko -->
</tbody>
</table>
<!-- /ko -->
我不确定是哪一个,我会很感激有一双新鲜的眼睛,因为我的大脑在jsfiddle会议上受伤了。
您有两个问题:
-
您没有正确绑定单选按钮的名称:
name="$parent.name"
不是一个敲除绑定表达式,它只是将字符串"$parent.name"
分配给所有单选按钮。您需要的是使用attr
绑定:<input type="radio" data-bind="checkedValue: $data, checked: $parent.selection, attr: { name: $parent.name }" />
-
初始选择不起作用,因为您使用的是
checkedValue: $data
选项,这意味着您的checked
应该包含整个对象,而不仅仅是一个属性(sku
),因此您需要将computedOptions.subscribe
更改为:computedOptions.subscribe(function () { var section = this; section.selection(section.options()[0]); },section);
演示JSFiddle。
相关文章:
- 构建淘汰模型并动态查看,不设置单选按钮
- 根据选中的按钮运行不同的计算时,设置单选按钮
- 如何使用 AngularJS 在页面加载时通过查询字符串值来设置单选按钮值
- 流星:如何根据数据库中的值设置单选按钮的值
- 引导设置单选按钮与 jquery 一起检查
- JavaScript:取消选择时设置单选按钮的背景(单选按钮组)
- 仅在一个表格行内设置单选按钮标签的样式
- 未从视图模型(KNOCKOUTJS)设置单选按钮
- 设置单选按钮,无需交互,仅使用javascript
- 如何使用JavaScript设置单选按钮状态
- 设置单选按钮单击两个目的地(提交表单和重定向)
- 如何使用单选按钮的值来设置单选按钮
- 如何设置单选按钮列表与后缀文本后的单选图标
- 设置单选按钮的值在并排问题的质量-打破了JFE,但在标准工作
- 如何以编程方式设置单选按钮和选择选项与js
- 在javascript中设置单选按钮值
- 设置单选按钮值等于特定表行的文本
- AngularJS通过嵌套的id属性来设置单选按钮数组的默认值
- 如何在react material-ui中编程设置单选按钮选择
- 通过文本框值设置单选按钮为true