Remove element after applying bindings with knockout.js

There are some situations that you want to display something before the bindings get applied. For example, you might want to display a loading message until the bindings have been applied to this set of elements. Here is how you can do it.

<div id="container">
  <div data-bind="if: false">  <-- here is the trick
    <span>Loading ..</span>
  </div>
  <div data-bind=" --- something to bind by calling ko.applyBindings() --- "></div>
</div>

How it works? Simple. Once the bindings are applied, the binding on the div that surrounds the loading text will be removed automatically! 🙂

Advertisements