CODEWITHSUNDEEP
javascriptjquerycssknockout.js
taia
taia

Reputation: 61

when the CSS styles are applied to the DOM?

I use knockout to render a dynamic list, that has as CSS property width auto ( "width: auto") and I need to know when this CSS is applied. Is there is an event to capture when the CSS styles are applied to the DOM, or an event for the time when the DOM is ready to be visible?

 <div style: "width= auto">
  <!-- ko foreach: items -->
        <div class="list-item" data-bind="css: { active: !$parent.isActive() }">
            <a data-bind="text: Label"></a>
        </div>
  <!-- /ko -->
 </div>

thanks

Upvotes: 1

Views: 244

Answers (2)

Jeroen
Jeroen

Reputation: 63780

Let me summarize the two already mentioned options, and add two other options as well:

  1. Cloaking: @user3297291's option using a cloak-like trick.
  2. Vanilla JS: A vanilla js solution OP mentioned in a comment to the question.
  3. Fork css binding: Create a custom binding based on the built in css binding that allows for a callback after applying changes. The css binding is not that big / difficult, so creating a fork/spinoff seems okay to me.
  4. Foreach / AfterRender: Using afterRender on the foreach you can link some code to rendering of individual elements, and adjust the DOM / CSS accordingly.

Upvotes: 2

user3297291
user3297291

Reputation: 23372

The style attribute (in which you should swap out the = and the : symbols) is applied during the first render and will be visible right away.

The css binding is applied when you call ko.applyBindings.

If you want to hide stuff until you've applied bindings, you could use a trick like:

<div class="hideUntilBind" data-bind="css: { 'hideUntilBind': false }"></div>

With css:

.hideUntilBind { display: none; }

Upvotes: 2

Related Questions