2013-10-23 65 views
2
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; 
     } 
    } 
    }; 

选择器不工作的自定义绑定。挖空 - jquery选择器不工作里面自定义绑定

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

See fiddle here

+0

你的意思是在不工作?你如何使用下面的绑定?你可以创建一个JSFiddle来演示你的问题> – nemesv

+0

按预期工作http://jsfiddle.net/pw9bv/ – Ilya

回答

1

在看到你的小提琴之后,我尝试了一个不涉及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); 
1

.innerHTML是JavaScript原生功能,并且不使用jQuery工作。尝试使用.html()代替。

$(element).html(viewModel.value);