您不能多次将绑定应用于Knockout.Js

时间:2017-10-06 09:41:19

标签: javascript jquery knockout.js

我只应用了一次绑定,但仍然出现错误

  

您不能多次将绑定应用于同一元素。

这是我的剧本。

    <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>

这是html数据

<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>

1 个答案:

答案 0 :(得分:1)

有几点需要注意:

  • var self = this;应该在构造函数中。在外面,this指的是窗口对象。

  • 您应该将包含observable属性的对象传递给ko.applyBindings()。不是功能本身。

  • 您可以使用Function Expression or Function Declaration在javascript中创建一个函数。您的代码中不需要viewModel。它也是 var vm = function() {}function vm(){}

  • 默认情况下,您已将checkAppointmentListSelect设置为false。您的按钮不会在加载时显示,您可以单击。

将您的代码更改为:

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。如果您仍然遇到任何问题,请进行所有这些更改并告诉我。