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