Inline Invisible mapping display for Inline knockout not working

Question

I use visible binding in a knockout. I want to set the h3 html element to display:inline . However, after the binding occurs, the css display: inline string is cleared and returned. When I do not use visible binding, I do not have this problem.

 <div style='display: inline'> <label style='display: inline'>Product Total</label> </div> <div style='display: inline'> <h3 style='display: inline' data-bind='visible: Total() > 3, text: Total'></h3> </div> 

Enter a value above 3 to reproduce the problem: http://jsfiddle.net/ryandxavier/ung4z/

Answer 1

The visible binding switches the element's visibility between "" and "none" , so you need to create a custom binding that supports inline display:

Based on the visible source code (you can further expand this transfer in a file with a saved value as a parameter):

 ko.bindingHandlers['visibleInline'] = { 'update': function (element, valueAccessor) { var value = ko.utils.unwrapObservable(valueAccessor()); var isCurrentlyVisible = !(element.style.display == "none"); if (value && !isCurrentlyVisible) element.style.display = "inline"; else if ((!value) && isCurrentlyVisible) element.style.display = "none"; } }; 

And use in your html:

 <h3 style='display: inline' data-bind='visibleInline: Total() > 3, text: Total'></h3> 

JSFiddle demo.

Or as an alternative solution, you can use the syntax without a container and not put the binding on h3 and use if instead of visible :

 <h3 style='display: inline'> <!-- ko if: Total() > 3 --> <!-- ko text: Total --><!-- /ko --> <!-- /ko --> </h3> 

JSFiddle demo.

Answer 2

 data-bind="style: { display: yesOrNo() ? 'inline' : 'none' }"