在 Knockout Foreach 循环中生成 ID

Question

我正在尝试使用 Knockout 构建一些 HTML，以便 Jquery UI 可以转换为 toggle buttons。我需要达到的是：

<div id="status">
    <input type="radio" id="status_ACTIVE" value="ACTIVE" name="status" /><label for="status_ACTIVE">Active</label>
    <input type="radio" id="status_INACTIVE" value="INACTIVE" name="status" checked="checked" /><label for="status_INACTIVE">Inactive</label>
</div>

使用 JQuery UI，我可以轻松地将其转换为切换按钮。但是，如何在不使用现在已弃用的 JQuery 模板的情况下生成它呢？这是我试图做的：

javascript模型内部：

self.statuses = [{Selected:true,Text:"Active",Value:"ACTIVE"},{Selected:false,Text:"Inactive",Value:"INACTIVE"}];

标记：

<div id="status" data-bind="foreach: statuses">
    <input type="radio" name="status" data-bind="value: Value, id: 'status_' + Value" /><label data-bind="text: Text, for: 'status_' + Value"></label>
</div>

这不起作用。我认为它不喜欢我尝试创建该 ID 或将其与循环中的 for 关联的方式。它错误地绘制了按钮，因为两个独立的按钮并且单击功能不起作用。

即使我只是将值指定为 id，例如：id: Value 和 for: Value，它仍然不起作用。我可以不使用敲除设置这些属性吗？

Answer 1

添加这个 javascript 解决了我的问题：

ko.bindingHandlers.id = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
    },
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        $(element).attr('id', valueAccessor());
    }
};

ko.bindingHandlers.forattr = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
    },
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        $(element).attr('for', valueAccessor());
    }
};

我确实必须将for: 'status_' + Value 更改为foratt: 'status_' + Value，因为for 是保留字。

更新： 我也可以使用“attr”绑定，如下所示：

attr: { for: 'status_' + Value }