CODEWITHSUNDEEP
javascriptknockout.js
Thufir Hawat
Thufir Hawat

Reputation: 466

knockoutJS binding programmatically based on model values

I have html that looks like this:

 <select data-bind="options: movieInitValues,
                        optionsText: 'Text',
                         optionsValue: 'Value',
                          value: movieSelectedValue,
                           visible: movieSelectVisible"></select>
 <input data-bind="autoMovieComplete: {
     selected: movieSelectedValue,
      selectedName: movieSelectedName},
       visible: showMovieDD,
        disable: promoCodeInvalid" id="MovieName" type="text" />

Basically, the idea is that under certain parameters I show a textbox with autocomplete and in other cases I show dropdown. The 'visible' binding allows me to do the hiding, but what about binding. I want only one of these to bind to movieSelectedValue, how can I do this programmatically?

Upvotes: 1

Views: 37

Answers (1)

Kyeotic
Kyeotic

Reputation: 19847

An if binding will work. It stops anything inside from being rendered unless its condition evaluates true. You can combine it with the containerless syntax if you don't want to wrap these guys in a div.

It also takes care of the visibility aspect, since it removes it from the DOM entirely.

<!-- ko if: movieSelectVisible -->
<select data-bind="options: movieInitValues,
                        optionsText: 'Text',
                         optionsValue: 'Value',
                          value: movieSelectedValue></select>
<!-- /ko -->
<!-- ko if: showMovieDD-->
 <input data-bind="autoMovieComplete: {
     selected: movieSelectedValue,
      selectedName: movieSelectedName}
        disable: promoCodeInvalid" id="MovieName" type="text" />
<!-- /ko -->

Upvotes: 1

Related Questions