Ndtyjky

I changed previous example code and my logic. I need click the button and collapse the from div by element id. Collapse text gets from KO
arrays, and I want button visible if Array exist. data-bind"visible: exist Array1..2"

<div class=«header»>

<!— ko if: typeof Array1 !== 'undefined' —>

    <button data-toggle="collapse" href="#containerLoan<?= $key + 1 ?>» aria-expanded=" false" aria-controls="containerLoan<?= $key ? >">button1</button>

<!-- /ko -->

<!— ko if: typeof Array2 !== 'undefined' —>

<button data-toggle="collapse" href="#containerLoan<?= $key + 2 ?>» 

               aria-expanded=" false

    " aria-controls="containerLoan<?= $key ?>">button2</button>

<!-- /ko -->

</div>



<div class=«loandata» data-bind='component: { name: «test-component", params: { Id: <?= $model->Id ?>} }'></div>



<script type="text/html" id=«test-template">



<div class="collapse multi-collapse" id="containerLoan<?= $key + 1 ?>">

  <div class="card card-body">

    <!-- ko if: Array1.length > 0 -->

      <div>…</div>

    <!-- /ko -->

  </div>

</div>



<div class="collapse multi-collapse" id="containerLoan<?= $key + 2 ?>">

  <div class="card card-body">

    <!-- ko if: Array2.length > 0 -->

      <div>…</div>

    <!-- /ko -->

  </div>

</div>



</script>

In *.ts
namespace Test.One {

export class TestViewModel {

…

Array1: KnockoutObservable<Product> = ko.computed(() => { … return …; }

Array2: KnockoutObservable<Product> = ko.computed(() => { … return …; }



private fetch(id: number): void {

$.getJSON(…)

}



    constructor(params: { Id: number }) {

        this.Id(params.Id);

        this.fetch(params.Id);

    }

export class ViewModel {

    constructor() {

        ko.components.register(‘test-component', {

            viewModel: params => {

                return new TestViewModel(params);

            },

            template:{

    element : 

                 'hint-loan-product-template'

},

        });

    }

}



export let viewModelObject = new ViewModel();

ko.cleanNode(document.getElementById(‘test-area’));

ko.applyBindings(viewModelObject);//,    document.getElementById(‘test-area'));

}

The best solution is to explicitly pass a reference to the isVisible observable via the component's params. This way, you don't create a hard dependency that forces the component to only be used within binding contexts that contain a certain property.

Here's an example, using some component from the knockout docs

• The outer viewmodel contains a visibility control property: outerIsVisible
  


• When creating the component, we tell it which observable controls the visibility


• The component's viewmodel has its own isVisible which references the one in params
  


• The component's view references its own viewmodel's property, of which we can be sure it's always defined.

ko.components.register('message-editor', {

    viewModel: function(params) {

        this.isVisible = params.isVisible;

        this.text = ko.observable(params && params.initialText || '');

    },

    template: `<div data-bind="visible: isVisible">

      Message: <input data-bind="textInput: text" />

      (length: <span data-bind="text: text().length"></span>)

    </div>`

});

 

ko.applyBindings({

  outerIsVisible: ko.observable(true)

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>



<label>

  <input type="checkbox" data-bind="checked: outerIsVisible">

  Show message editor

</label>



<div data-bind='component: {

    name: "message-editor",

    params: { 

      initialText: "Hello, world!",

      isVisible: outerIsVisible

    }

}'></div>