The novelty of knockout.js does not work when applying CSS style

Question

I have a problem when knockout.js 2.0 does not show my element when CSS style is applied to it. It will not update the display with the style applied to it. If it is turned off, it works.

CSS

.success { display:none } 

HTML

  <div data-bind="visible: site.signUp.success()" class="success"> Thanks for signining up. You will recieve an email from us in the near future. </div> 

Js

 app.viewModel.site.signUp.success(true); 

Answer 1

I created a fiddle that shows how you can use css binding in Knockout to do this. http://jsfiddle.net/johnpapa/vwcfT/

Here is the HTML:

 Success Flag: <input type="checkbox" data-bind="checked:site.signUp.success"></input> <div data-bind="visible: site.signUp.success" > Thanks for signining up. You will recieve an email from us in the near future. </div> <br/><br/> <span data-bind="text:site.signUp.success"></span> <div data-bind="css: { success: site.signUp.success}" > Thanks for signining up. You will recieve an email from us in the near future. </div> 

The first DIV in the example uses only visible binding, since you really don't need the css class to do this. The second DIV in this example binds to the css class named "success" if true.signUp.success is true. This is more verbose than the first, but can be useful if you need your css class to do more than just set visibility.

Hope this helps.

Here is the javascript:

 var viewModel = { site: { signUp: { success: ko.observable(true) } } }; ko.applyBindings(viewModel); 

Answer 2

During the period of time when Knockout.js applies bindings, you can prevent the initial render / blink effect by setting the default display style to none .

  <div style="display: none" data-bind="visible: site.signUp.success"> Thanks for signining up. You will recieve an email from us in the near future. </div> 

Answer 3

This is because the success style is defined as display:none , which is equivalent to visible = false . Your CSS class cancels your call to site.signUp.success() .

If you want your DIV to be displayed only when site.signUp.success() == true , just do the following:

 <div data-bind="visible: site.signUp.success"> Thanks for signining up. You will recieve an email from us in the near future. </div> 

Answer 4

It may be a little late, but I found the following helpful. Instead of capturing each element with a visibility control, just wrap the div around all of your previously hidden elements as follows:

 <div style="display:none" data-bind="visible: true"> Some pre-hidden elements <div data-bind="visible: myVisibleFoo">...</div> <div data-bind="visible: myVisibleBar">...</div> Other pre-hidden elements ... </div> 

The entire section of the elements is first hidden and is displayed only after KO has applied the bindings. I usually wrap the entire page to avoid any flashing problem.

Answer 5

Just stumble upon it yourself; I can understand why this was done so, but it’s convenient to set the default visibility of none of the last loaded items on the page so that they do not blink as scripts load. The most enjoyable way I could find is to simply create a normal binding:

 ko.bindingHandlers.forceVisible = { update: function(el, f_valueaccessor, allbindings, viewmodel, bindingcontext) { if(ko.unwrap(f_valueaccessor())) el.style.display = 'inherit'; else el.style.display = 'none'; } }; 

You should be a little careful when setting styles; if you use a div , and your CSS sets it to display:inline-block , then this code will not work - it will have a block display when applying inherit . However, this simple solution was suitable for my use.