admin管理员组

文章数量:1207155

I am using kendo mobile app builder and I am using knockout js for bindings but I am getting error "You cannot apply bindings multiple times to the same element". I have two javascript file which consist bindings, below my code

//Employee.js//

function EmployeeViewModel() {
   this.EmployeeName= ko.observable();
   this.EmployeeMobile= ko.observable();
   this.EmployeeEmail= ko.observable(); }
   ko.applyBindings(new EmployeeViewModel());

//Company.js//
function CompanyViewModel() {
   this.CompanyName= ko.observable();
   this.CompanyMobile= ko.observable();
   this.CompanyEmail= ko.observable(); }
   ko.applyBindings(new CompanyViewModel());

//In index page i am using this both script file drag and drop//
<html>
 <head>
 </head>
 <body>
  <script src="Employee.js"></script>
  <script src="Company.js"></script>
 </body>
</html>

I am using kendo mobile app builder and I am using knockout js for bindings but I am getting error "You cannot apply bindings multiple times to the same element". I have two javascript file which consist bindings, below my code

//Employee.js//

function EmployeeViewModel() {
   this.EmployeeName= ko.observable();
   this.EmployeeMobile= ko.observable();
   this.EmployeeEmail= ko.observable(); }
   ko.applyBindings(new EmployeeViewModel());

//Company.js//
function CompanyViewModel() {
   this.CompanyName= ko.observable();
   this.CompanyMobile= ko.observable();
   this.CompanyEmail= ko.observable(); }
   ko.applyBindings(new CompanyViewModel());

//In index page i am using this both script file drag and drop//
<html>
 <head>
 </head>
 <body>
  <script src="Employee.js"></script>
  <script src="Company.js"></script>
 </body>
</html>
  • javascript
  • jquery
  • knockout.js
  • knockout-mapping-plugin
Share Improve this question edited Oct 27, 2017 at 19:28 achref 1,2201 gold badge13 silver badges29 bronze badges asked Sep 13, 2016 at 5:22 kitty sarvajkitty sarvaj 5275 gold badges10 silver badges25 bronze badges
Add a comment  | 

2 Answers 2

Reset to default 17

The "ko.applyBindings" function takes 2 arguments:

applyBindings(viewModelOrBindingContext, rootNode);

first - view model

second - DOM node the binding will be applied to

You call "ko.applyBindings" method twice - in both functions, with the first parameter only. This means you are going to bind two different models to the same node - document root. This causes the error.

You can use two approaches:

  • create one global view model with submodels and apply binding only once:

    //Employee.js//
function EmployeeViewModel() {
   this.EmployeeName= ko.observable();
   this.EmployeeMobile= ko.observable();
   this.EmployeeEmail= ko.observable();
}

//Company.js//
function CompanyViewModel() {
   this.CompanyName= ko.observable();
   this.CompanyMobile= ko.observable();
   this.CompanyEmail= ko.observable();
}

//In index page i am using this both script file drag and drop//
<html>
 <head>
 </head>
 <body>
  <script src="Employee.js"></script>
  <script src="Company.js"></script>
  <script>
   ko.applyBindings({ employee: new EmployeeViewModel(), company: new CompanyViewModel() });
  </script>
 </body>
</html>

  • apply bindings to different nodes:

```

//Employee.js
function EmployeeViewModel() {
   this.EmployeeName= ko.observable();
   this.EmployeeMobile= ko.observable();
   this.EmployeeEmail= ko.observable();
   ko.applyBindings(new EmployeeViewModel(), document.getElementById("employee"));
}

//Company.js
function CompanyViewModel() {
   this.CompanyName= ko.observable();
   this.CompanyMobile= ko.observable();
   this.CompanyEmail= ko.observable();
   ko.applyBindings(new CompanyViewModel(), document.getElementById("company"));
}

//In index page i am using this both script file drag and drop//
<html>
 <body>
  <script src="Employee.js"></script>
  <script src="Company.js"></script>
  <div id="employee"></div>
  <div id="company"></div>
 </body>
</html>

```

To apply binding multiple time. You need to first clear the binding.

like below

var element = $('#elementId')[0]; 
ko.cleanNode(element);

Then only you can apply binding again on same element.

本文标签： javascriptKnockout Js quotYou cannot apply bindings multiple times to the same elementquotStack Overflow

版权声明：本文标题：javascript - Knockout Js &quot;You cannot apply bindings multiple times to the same element&quot; - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1738734609a2109523.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。