Search code examples
knockout.jsdurandalclass-visibility

How to activate a compose model only when it is visible?

I have a view that contains a composed model. When I upload the page the composed component although it is not visible yet is being activate. What I want is to click on the button "Answer", so then and only then The composed component will be activate (Means start the activate lifecycle of the "composedView"

This is my view:

<div class="parentView">
  <div class="action-button-wrapper">
    <!-- ko if: !answered -->
        <button class="button" data-bind="click:function(){answerClicked(true)}">
            <span class="text">Answer</span>
        </button>
    <!-- /ko -->
</div>
<div data-bind="visible:answerClicked">
    <div class="second-view-wrapper" data-bind="compose: {model:'composedView' ,preserveContext: true}"></div>
  </div>
</div>

Thank you!

Solution

  • Change the visible to a if binding is one way of solving it