javascript - 具有 attr 绑定(bind)的数据绑定(bind)动态命名的 data-* 属性

Question

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

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

基本上，我想执行类似这样的操作:

<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...

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

Answer 1

我认为自定义绑定(bind)在这里是合适的。像这样:

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>