使用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- *屬性

回答

相關問題