Javascript 数据绑定使用attr绑定动态命名的Data-*属性

我发现了几个类似的问题，但没有一个能准确地解决这个问题

我正在尝试根据“标记”列表向元素添加属性。每个标记都是组的一部分。组将是属性名，标记将全部位于值中

基本上，我想执行类似的操作：

代码的重要部分是

attr:{'data-'+$parent.Name:$data

---

我已经尝试了各种方法来实现这一点，例如预先确定属性名称、计算属性名称、调用函数等，但knockout不会处理它们。

一种方法是创建一个函数，用动态属性构建对象：

self.createTagAttribute = function(tag, value) {
    var attrs = {};
    attrs[tag] = value;
    return attrs;
};

在你的约束中：

<li><a href="#" data-bind="
    text: $data, 
    attr: ko.utils.extend(
        $root.createTagAttribute($parent.Name, $data), 
        {'data-multiselect': $parent.IsMultiSelect.toString(), 'rel': $parent.Name}
    )"></a></li>

（这应该放在

ko.applyBindings

之前）

在此之后，您可以执行以下操作：

<a href="#" 
   data-bind="text: $data, 
              attr: { 'data-multiselect': $parent.IsMultiSelect.toString(), 
                      'rel': $parent.Name }.add('data-' + $parent.Name, $data)">

---

我认为定制绑定在这里是合适的。如下所示：

ko.bindingHandlers.customDataAttr={
更新：函数（元素、valueAccessor、allBindings、viewModel、bindingContext）{
var key=valueAccessor（）.name；
var val=valueAccessor（）.val；
setAttribute（key，val）；
//请确保已设置：
控制台日志（元素）；
}
};
var ViewModel=函数（）{
var self=这个；
self.Options=['A'，'B'，'C']；
self.Name=ko.observable（“我的名字”）；
self.IsMultiSelect='false'；
self.dataAttrName=ko.computed（函数（）{
返回'data-'+self.Name（）；
});
};
ko.applyBindings（newviewmodel（））；

甚至毫无用处　<代码>'data-'+$parent.Name（）？这不起作用。这怎么办？除非他们在模板中经过一些困惑之后，我理解你的意思。我试图重写你的标题，以便更好地反映问题。如果你觉得我的更改的含义改变太多和/或不正确，请回滚我的更改。哇，这是什么运行代码片段stuff、 我第一次看到它，非常cool@RobA，您也可以在问题中使用“m”：它是编辑器工具栏上的一个按钮。将它们添加为问题中的复制，肯定会让您相对更快/更好地回答问题。

<a href="#" 
   data-bind="text: $data, 
              attr: { 'data-multiselect': $parent.IsMultiSelect.toString(), 
                      'rel': $parent.Name }.add('data-' + $parent.Name, $data)">