1

I have a scenario where i want to be abel to have a visibility binding. And I want it to be virtual.

This fiddle solves my problem but I want a bindgHandler of it. The problem I want to solve is that if a block property is true the elemnt should take up the space in the HTML, and I dont want to render unnessesery things.

http://jsfiddle.net/7ENpC/1/

I want to be abel to do this or nicer ofcourse.

<!-- ko foreach: allRows -->
<!-- ko visibility: $data-->
 <div>
   <span data-bind="text:text"></span>
 </div>
<!-- /ko -->
<!-- /ko -->

In the bindingHander all I do is 

if(block)
   $element.css("visibility","hidden");
else
   $element.css("visibility","visible");

I cant get it right...can someone please help me in the right direction.

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

},
update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
                var child = ko.virtualElements.firstChild(element),

       var visible = valueAccessor().visible();
       var block= valueAccessor().block();

   if (!block||!visible) {
       //call the general if binding ?

    } else {
      //Add visibility:hidden class 
    }

}
};
ko.virtualElements.allowedBindings.visibility = true;
JotaBe
  • 38,030
  • 8
  • 98
  • 117
user1199595
  • 406
  • 2
  • 7
  • 16

1 Answers1

1

To make a custom binding able to be used as a virtual element you need to add

ko.virtualElements.allowedBindings.<your custom binding name here> = true;

So, in your case, you would want to do

ko.virtualElements.allowedBindings.visiblity = true;

into your code before you call ko.applyBindings(). See the this documentation for more information.

Rynan
  • 481
  • 2
  • 4
  • yes i have tried that. But don't see how I should get the first element. And get it to work both virtual and not virtual. – user1199595 Oct 19 '12 at 17:00