Applying binding to knockoutjs ViewModel in a bootstrap modal

Question

I'm trying to apply knockout bidding to a modal popup.

I have the fowlling ViewModel :

var ViewModel = function () {
    var self = this;
    self.radioSelectedOption = ko.observable("optionFreeText");


    // It only show textarea when free text message option value is selected
    self.hasFreTextMessageSelected = ko.computed(function () {
        return (self.radioSelectedOption() === "optionFreeText");
    });    
}

And the HTML Modal below:

<section id="test-modal" class="modal fade" tabindex="-1" data-width="760">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
        <h4 class="modal-title">Enviar Mensagem</h4>
    </div>
    <div class="modal-body">
        <div class="form-body">
            <div class="form-group">
                <label>Tipo de Mensagem</label>
                <div class="radio-list">
                    <label class="radio-inline">
                        <input type="radio"  data-bind="checked: radioSelectedOption" name="optionsRadiosMessageType" id="optionRadioFreeText" value="optionFreeText" class="make-switch optionsRadiosMessageType" checked>
                        Livre
                    </label>
                    <label class="radio-inline">
                        <input type="radio"  data-bind="checked: radioSelectedOption" name="optionsRadiosMessageType" id="optionRadioStateRefresh" value="optionStateRefresh" class="make-switch optionsRadiosMessageType">
                        Pedido de Estado
                    </label>
                </div>
            </div>
            <div for="textareaFreeText" class="form-group" data-bind='visible: hasFreTextMessageSelected'>
                <label>Texto</label>
                <textarea id="textareaFreeText" class="form-control" rows="3"></textarea>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" data-dismiss="modal" class="btn btn-default">Cancel</button>
        <button type="button" class="btn blue">Enviar</button>
    </div>
</section>

Then in the event on document ready :

ko.applyBindings(new ViewModal());

When I run the code the first time it works perfectly but after the first modal dispose it stop working. The ViewModel is never updated after the first dispose, but I can get the old values.

It looks like the binding it is removed (but it isn't). If I try to binding it again I got the knockout exception "You cannot apply bindings multiple times to the same element"...

Answer 1

I think you just have a lot of typos here that tend to break Knockout bindings.

For instance:

1. You define var = function () {...} = function () {...}
   • but then pass in ko.applyBindings(new ); );
2. Your view model uses the observable self. self.
   • but your databinding uses data-bind="checked:
3. In your ViewModel, you check if the radio button has the value (self.radioSelectedOption() === " " "
   • but that value isn't defined anywhere in your markup.

Once you shore up those issues, the resulting code should work:

Working Demo in jsFiddle

Also, you don't have to pass in this as the second parameter to a computed property when using the var self = this trick.