在Knockout JS中绑定和检查无线电按钮
有更多的问题淘汰赛JS，并希望有人能够帮助我。(我问了那么多关于淘汰赛的问题，我想知道我是否应该坚持使用jQuery)。
我试图动态地创建一个单选按钮列表，其中包含两个或三个选项。每一行都是一组独立的按钮。
我可以把清单写好，但我很难找到合适的。
我拥有的HTML是：
<div data-bind="with: functions" id="ActionWindow">
<h2>bob<span data-bind="text: pgroupname"></span></h2>
<h2>Read & Update Functions</h2>
<div>
<table>
<thead class="FunctionsTableHead">
<tr>
<th class="FunctionName">Function</th>
<th>None</th>
<th>Read</th>
<th>Write</th>
</tr>
</thead>
<tbody class="FunctionsTable" data-bind="foreach: pReadFunctions">
<tr>
<td class="FunctionName" data-bind="text: FunctionName"></td>
<td><label><input type="radio" data-bind="attr: { name: FunctionNum + '-ReadAccessLevel'}, checkedValue: 0, checked: AccessLevel" /></label></td>
<td><label><input type="radio" data-bind="attr: { name: FunctionNum + '-ReadAccessLevel'}, checkedValue: 1, checked: AccessLevel" /></label></td>
<td><label><input type="radio" data-bind="attr: { name: FunctionNum + '-ReadAccessLevel'}, checkedValue: 2, checked: AccessLevel" /></label></td>
</tr>
</tbody>
</table>
</div>
<h2>Action Functions</h2>
<table>
<thead class="FunctionsTableHead">
<tr>
<th class="FunctionName">Function</th>
<th>None</th>
<th>Action</th>
</tr>
</thead>
<tbody class="FunctionsTable" data-bind="foreach: pActionFunctions">
<tr>
<td class="FunctionName" data-bind="text: FunctionName"></td>
<td><label><input type="radio" data-bind="attr: { name: FunctionNum + '-ActionAccessLevel'}, checkedValue: 0, checked: AccessLevel" /></label></td>
<td><label><input type="radio" data-bind="attr: { name: FunctionNum + '-ActionAccessLevel'}, checkedValue: 1, checked: AccessLevel" /></label></td>
</tr>
</tbody>
</table>
对于两个单选按钮列表，我尝试了两种不同的方法，但这两种方法都没有奏效：
<script type="text/javascript">
//slide animation for lefthand menu
$('.ListDeptLink').click(function () {
$(this).nextAll('.SectListDiv').first().slideToggle(500);
});
$('.ListSectLink').click(function () {
var url = '@Url.Action("DisplayGroup", "AjaxGroup")' + '?GroupId=' + $(this).attr("GroupId") + "&GroupName=" + encodeURIComponent($(this).attr("GroupName"));
$.ajax({
url: url,
contentType: "application/json; charset=utf-8",
type: 'POST',
context: this,
timeout: 60000,
dataType: 'json',
tryCount: 0,
retryLimit: 3,
success: function (data) {
viewModel.functions(new functionsModel(data))
},
error: function (httpRequest, textStatus, errorThrown) {
alert("Error");
}
});
});
function functionsModel(data) {
this.pgroupname = ko.observable(data ? data.GroupName : "");
this.FunctionNum = data ? data.FunctionNum : "";
this.AccessLevel = data ? data.AccessLevel : "";
this.pReadFunctions = ko.observableArray((data ? data.ReadFunctionList : [])
.map(function (item) {
return {
FunctionNum: item.FunctionNum,
FunctionName: item.FunctionName,
AccessLevel: ko.observable(item.AccessLevel)
};
})
);
this.pActionFunctions = ko.observableArray((data ? data.ActionFunctionList : [])
.map(function (item) {
return {
FunctionNum: item.FunctionNum,
FunctionName: item.FunctionName,
AccessLevel: ko.observable(item.AccessLevel)
};
})
);
};
var wrapper = function () {
this.functions = ko.observable(new functionsModel(null));
};
var viewModel = new wrapper();
ko.applyBindings(viewModel);
最后是数据返回的一个例子：
ReadFunctionList":[],"ActionFunctionList": [{"FunctionNum":582,"FunctionName":"Name1","FunctionType":Ignorethis,"GroupNum":1,"AccessLevel":0},{"FunctionNum":502,"FunctionName":"Name2","FunctionType":IgnoreThis,"GroupNum":2,"AccessLevel":0},"GroupName":"Name1"}AccessLevel是决定哪一个应该勾选的东西，所以在这个例子中，两个项目都应该有第一个无线电按钮。
(谢谢您的帮助:)
编辑:我已经用到目前为止的位置更新了代码
回答 2
Stack Overflow用户
发布于 2014-03-03 17:38:45
Javascript发布
我认为包装器中的函数应该是可观察的，而不是observableArray。
var wrapper = function () {
this.functions= ko.observable(new functionsModel(null));
};您的pReadFunction和pActionFunction项应该具有可观察到的AccessLevel属性。您将不会从将单选按钮更改为视图模型中获得更新。
// Inside $('.ListSectLink').click
this.pReadFunctions = ko.observableArray( (data ? data.ReadFunctionList : [] )
.map( function(item) {
return {
FunctionNum: item.FunctionNum,
FunctionName: item.FunctionName,
FunctionType: item.FunctionType,
GroupNum: item.GroupNum,
AccessLevel: ko.observable(item.AccessLevel)
};
})
);
// Repeat for pActionFunctions在您的jsFiddle中，不要在单击处理程序中使用AJAX调用，只需直接分配示例数据。如果您真的想模拟异步回调，请使用$.Deferred / resolveWith。
$('.ListSectLink').click(function () {
var testData = ...
viewModel.functions( new functionsModel(testData) );
});
$('.ListSectLink').click(function () {
var testData = ...
var deferred = $.Deferred();
deferred.done( function(data) {
this.functions( new functionsModel(data) );
});
setTimeout( function() {
deferred.resolveWith(viewModel, [testData]);
}, 100);
});HTML/绑定问题
在您的jsFiddle中，它缺少包装器->函数绑定。这可能就是为什么样本不能工作的原因。假设是这样的。
<div data-bind="with: functions" />输入无线电检查绑定不应针对$root。这将是示例中的包装器实例。给定示例JSON，AccessLevel位于每个ReadFunctionList和ActionFunctionList数组项上，因此对选中的数据绑定使用"$data.AccessLevel“(或仅使用"AccessLevel”)。
选中的绑定将与元素的值和可观察的支持值进行比较。但是元素的绑定是一个字符串，但是在示例JSON中它是一个数字。这不相配。添加一个checkedValue数据绑定表达式，以覆盖每个单选按钮的“值”为数字。
您还需要为pReadFunction单选按钮使用名称attr绑定，就像对pActionFunction单选按钮一样，将每一行分组为一组。您还可以考虑在Read和Action中添加另一个前缀，以防FunctionNum在这两个集合之间不是唯一的。
<input type="radio" data-bind="
attr: { name: 'Action-' + FunctionNum + '-AccessLevel'},
checkedValue: 0,
checked: AccessLevel" />
<input type="radio" data-bind="
attr: { name: 'Action-' + FunctionNum + '-AccessLevel'},
checkedValue: 1,
checked: AccessLevel" />加成积分
您还可以使用单击绑定而不是使用jQuery。click函数将是包装类上的函数。您需要传递Url，因为它看起来是生成服务器端的。我用一个按钮连接这个例子的数据绑定。您可能需要帮助剃须刀引擎在数据绑定属性中解决客户端和服务器端的问题。我将把它作为练习留给读者;)
这里的好处是，所有的模型操作都包含在viewModel中。还请注意click数据绑定表达式上的bind语句。这就是将参数转化为函数的方式。如果“包装器”不是根对象，则可能需要根据实际应用程序绑定/视图模型结构将其更改为$data或$parent。在jsFiddle中，它将起作用。
<button data-bind="click: getListSectLink.bind($root, @Url.Action(...)">Get</button>
function wrapper() {
this.functions = ko.observable( new FunctionsModel(null ) );
this.getListSectLink = function(url) {
// ajax stuff
success: function(data) {
this.functions( new functionsModel(data) );
}
};
}Stack Overflow用户
发布于 2014-03-03 17:51:34
问题是，Knockout使用一个精确的比较来确定要选择哪个单选按钮，并且您正在绑定到一个整数checked值，同时给单选按钮一个字符串attr值。解决方案是使用checkedValue绑定(而不是attr)给单选按钮一个整数值：
<input type="radio" data-bind="checkedValue: FunctionNum, checked: $root.AccessLevel" />参考资料：http://knockoutjs.com/documentation/checked-binding.html#parameters
https://stackoverflow.com/questions/22149370
复制
相似问题
knockout js if绑定和脚本
在knockout js上执行不是真的检查绑定？
knockout js中的无线电验证
如何基于绑定值在Knockout.js中隐藏按钮
Knockout Js:-带有删除按钮的标签绑定
领取专属 10元无门槛券
AI混元助手 在线答疑
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
