jquery - 淘汰赛 - Jquery 选择器在自定义绑定中不起作用

Question

  ko.bindingHandlers.below = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {

      var valuex = valueAccessor(), allBindings = allBindingsAccessor();

      var th = $(element).closest('tbody').prev('thead').find('> tr > th').eq(index);
      if (th.attr("class") == valuex) {
        $(element).innerHTML = viewModel.value;
      }
    }
  };

选择器在自定义绑定中不起作用。

我也试过 $(element).parent() 并返回相同的元素。为什么？

在这里看小提琴

Answer 1

.innerHTML 是一个 javascript 原生函数，不适用于 jQuery。尝试 .html() 代替。

$(元素).html(viewModel.value);

Answer 2

看到你的小提琴后，我尝试了一个不涉及 jQuery 的解决方案，使用 Knockout 将该 Javascript 对象映射到 HTML 表。

http://jsfiddle.net/EfrainReyes/r6Vke/1/

HTML：

<table>
<thead>
    <tr>
        <th>Caracteristicas</th>
        <!-- ko foreach: planNames -->
        <th data-bind="text: $data"></th>
        <!-- /ko -->
    </tr>
</thead>
<tbody data-bind="foreach: caracteristicas">
    <tr>
        <td data-bind="text: $data"></td>
        <!-- ko foreach: { data: $root.rows($data) } -->
        <td data-bind="text: $data ? $data : '...'">

        </td>
        <!-- /ko -->
    </tr>
</tbody>
</table>

JS：

viewModel.planNames = ko.computed(function () {
    return ko.utils.arrayMap(this.plans(), function (plan) {
        return plan.PlanName();
    });
}, viewModel);

viewModel.caracteristicas = ko.computed(function () {
    var descripciones = ko.utils.arrayMap(this.plans(), function (plan) {
        return ko.utils.arrayMap(plan.Caracteristicas(), function (carac) {
            return carac.Descripcion();
        });
    });

    return ko.utils.arrayGetDistinctValues(descripciones.reduce(function (x,y) {
        return x.concat(y);
    }));
}, viewModel);

viewModel.rows = function(caracteristica) {
    var cars = ko.utils.arrayMap(this.plans(), function (plan) {
        var valor = null;

        var car = ko.utils.arrayFirst(plan.Caracteristicas(), function(carac) {
            return carac.Descripcion() === caracteristica;
        });

        if (car && car.Valor) {
            valor = car.Valor();
        }

        return valor;
    });
    return cars;
};

ko.applyBindings(viewModel);