You cannot apply bindings multiple times to the same element in Knockout.Js

Question

I'v applied binding only once, but still getting error

You cannot apply bindings multiple times to the same element.

This is my script.

    <script>
var self = this;
         var vm = function viewModel() {
                self.getAppointment = function () {
                    $("#dialog-confirm ").dialog({
                        resizable: false,
                        height: 250,
                        width: 500,
                        modal: true
                    });

                    self.checkAppointmentListSelect(true);
                }

                self.checkAppointmentListSelect = ko.observable(false);

                self.btnSelectAppointmentClick = function () {
                    self.checkAppointmentListSelect(true);
                }
                debugger;
            }

            ko.applyBindings(vm);
    </script>

This is the html data

<div id="dialog-confirm" title="Select Appointment">
        <div class="modal-body" data-bind="visible: checkAppointmentListSelect">

            <button class="btn btn-primary" id="btnSelectAppointment" data-bind="click: btnSelectAppointmentClick">Select</button>
            <button class="btn btn-primary" id="btnCancel">Cancel</button>
        </div>

        <div class="modal-body" data-bind="visible: checkAppointmentListSelect">

            <button class="btn btn-primary" id="btnSelectAppointment">Select </button>
            <button class="btn btn-primary" id="btnCancel">Cancel</button>
        </div>
    </div>

This code is working fine, can you add code samples of your view? Do you have more places where you call ko.applyBindings? — Rick, Oct 06 '17 at 09:46
Is the the _only_ place that knockout is being used on that page, or are you using it twice for two different areas? — James Thorpe, Oct 06 '17 at 09:52
There's something else going on somewhere that's not in your question. I note it's a dialog - is this perhaps being loaded dynamically, with it perhaps failing on the second and subsequent attempts? Otherwise there's not a lot we can go on from what you've posted. — James Thorpe, Oct 06 '17 at 09:54
Also a few points: `var self = this;` in your code is outside of the VM, it is hard to tell from your post, but it is probably the `window` object. You are not supposed to assign your VM props to that. Create a separate object instead. — Balázs, Oct 06 '17 at 09:57

adiga · Accepted Answer · 2017-10-06T10:51:20.653

A couple of things to note:

var self = this; should be inside the constructor function. Outside, this refers to the window object.
You should pass an object containing observable properties to ko.applyBindings(). Not the function itself.
You either use Function Expression or Function Declaration to create a function in javascript. viewModel in your code is not required. It's either var vm = function() {} or function vm(){}.
You have set checkAppointmentListSelect to false by default. Your buttons won't be displayed on load for you to click.

Change your code to:

function vm() {
  var self = this; // this should be inside the vm function

  self.getAppointment = function() {
    $("#dialog-confirm ").dialog({
      resizable: false,
      height: 250,
      width: 500,
      modal: true
    });

    self.checkAppointmentListSelect(true);
  }

  self.checkAppointmentListSelect = ko.observable(true);

  self.btnSelectAppointmentClick = function() {
    self.checkAppointmentListSelect(true);
  }
}

ko.applyBindings(new vm()); // `new vm()` creates an object of type vm

Here's a fiddle. Make all these changes and let me know if you're still facing any issue.

You cannot apply bindings multiple times to the same element in Knockout.Js

1 Answers1