CODEWITHSUNDEEP
knockout.jsko-custom-binding
user1199595
user1199595

Reputation: 426

virtual custom binding

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;

Upvotes: 1

Views: 1524

Answers (1)

Rynan
Rynan

Reputation: 481

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.

Upvotes: 1

Related Questions