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

我发现了一些类似的问题，但他们都没有看到完全解决这个问题。使用attr绑定数据绑定动态命名的data- *属性

我想添加属性到一个基于'标签'列表的元素。每个标签都是一个组的一部分。该组将是属性名称，并且标签将全部位于值中。

基本上，我想要执行类似这样：

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

代码的重要组成部分，是attr: { 'data-' + $parent.Name : $data ...

我试图使这项工作，如确定各种方法属性名称，计算它们，调用函数等，但淘汰赛只是不会处理它们。

来源

2014-12-03 Rob A

无用甚至' '数据 - ' + $ parent.Name（）'？ – alu 2014-12-03 00:31:03

不能解决问题 – 2014-12-03 00:34:58

这个怎么样？ http://jsfiddle.net/t5m0edz1/ – alu 2014-12-03 01:02:34

我想自定义绑定是为了在这里。就像这样：

ko.bindingHandlers.customDataAttr = { 
 
    update: function(element, valueAccessor, allBindings, viewModel, bindingContext) { 
 
     var key = valueAccessor().name; 
 
     var val = valueAccessor().val; 
 
     element.setAttribute(key, val); 
 
     
 
     // see that it's been set: 
 
     console.log(element); 
 
    } 
 
}; 
 

 
var ViewModel = function() { 
 
    var self = this; 
 
    self.Options = ['A', 'B', 'C']; 
 
    self.Name = ko.observable("my-name"); 
 
    self.IsMultiSelect = 'false'; 
 
    
 
    self.dataAttrName = ko.computed(function(){ 
 
    return 'data-' + self.Name(); 
 
    }); 
 
}; 
 

 
ko.applyBindings(new ViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
<ul data-bind="foreach: Options"> 
 
    <li> 
 
    <a href="#" class="x" 
 
     data-bind="text: $data, 
 
        customDataAttr: { val: $data, name: $parent.dataAttrName() }, 
 
        attr: { 'data-multiselect': $parent.IsMultiSelect.toString(), 
 
          'rel': $parent.Name }"> 
 
    </a> 
 
    </li> 
 
</ul>

来源

2014-12-03 07:56:58 Jeroen

whoa，这是什么运行代码片段的东西，我第一次看到它，非常酷 – 2014-12-03 17:16:06

@RobA [Stack Snippets]（http://meta.stackoverflow.com/q/269753/419956 ），您也可以在问题中使用'm'：它是编辑器工具栏上的按钮之一。将它们作为repro加入问题肯定会让你更快/更好地回答问题。 – Jeroen 2014-12-03 21:02:53

一种方法是创建一个与动态特性建立对象的函数：

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>

另外，如果你想保持你的绑定干净（你可以在道具上扩展Object原型），你可以添加以下内容：

Object.prototype.add = function(key, value) { 
    this[key] = value; 
    return this; 
};

（这要放在以前ko.applyBindings）

在这之后，你可以做到以下几点：

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

来源

2014-12-03 07:38:23 sroes

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

回答

相关问题