jquery - Knockout - Jquery 选择器在自定义绑定(bind)中不起作用

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;
      }
    }
  };

选择器不在自定义绑定(bind)内工作。

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

See fiddle here

Answer 1

看到你的 fiddle 后，我尝试了一个不涉及 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);