Skip to Main Content

DevOps, CI/CD and Automation

Announcement

For appeals, questions and feedback about Oracle Forums, please email oracle-forums-moderators_us@oracle.com. Technical questions should be asked in the appropriate category. Thank you!

Interested in getting your voice heard by members of the Developer Marketing team at Oracle? Check out this post for AppDev or this post for AI focus group information.

Composite component and jquery: oj-pending-subtree-hidden

Louise O'Connor-OracleJul 27 2018 — edited Jul 30 2018

Hi guys,

I'm trying to change a composite component style using jquery selectors.

Following is our code for the component:

<!-- ko foreach: leaderList -->

<div class="oj-flex oj-sm-flex-items-initial oj-sm-justify-content-center">                 

<div class="oj-flex oj-sm-flex-direction-column">

<leaderboard-card

   data-bind="attr: { id: 'leaderboardCard-' + $index()}"

   position="[[position]]"

   name="[[name]]"

   profile-image="[[profileImage]]"

   target="[[target]]"

   actual="[[actual]]"

   is-me="[[isMe]]"

   style=""

   valign="middle">

</leaderboard-card>   

</div>

</div>

<!-- /ko --> 

As you can see we have several components (leaderboard-card) which are dependent on the observeableArray leaderlist

In our code, we are trying to change the style of one of these components by using a JQuery selector as follows:

$('#leaderboardCard-0')

jQuery.fn.init [leaderboard-card#leaderboardCard-0.oj-pending-subtree-hidden]

     0: leaderboard-card#leaderboardCard-0.oj-pending-subtree-hidden

     length: 1

     __proto__: Object(0)

As you can see, the DOM element 'leaderboard-card' with id 'leaderboardCard-0' is returned by the JQuery selector but none of the children are available.

This code is executed right after the leaderlist observable array is updated.

We can see on the returned element from the JQuery selector that it contains a class 'oj-pending-subtree-hidden'.

This is preventing us from accessing any of the children of this element that we need to manipulate the style with css.

With checking the oj reference, we noticed there is an oj-complete class. These classes may indicate whether the element is rendering or already rendered.

Do you know if there is any way after an observable is updated of being notified so we can manipulate the elements before/after its rendered?

Is there an event notifying that an element has been passed from 'oj-pending-subtree-hidden' to 'oj-complete'?

Thanking you in advance

Comments

Post Details

Added on Jul 27 2018
6 comments
535 views