javascript - Knockout Js "You cannot apply bindings multiple times to the same element" -
i using kendo mobile app builder , using knockout js bindings getting error "you cannot apply bindings multiple times same element". have 2 javascript file consist bindings, below 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 using both script file drag , drop// <html> <head> </head> <body> <script src="employee.js"></script> <script src="company.js"></script> </body> </html>
the "ko.applybindings" function takes 2 arguments:
applybindings(viewmodelorbindingcontext, rootnode); first - view model
second - dom node binding applied to
you call "ko.applybindings" method twice - in both functions, first parameter only. means going bind 2 different models same node - document root. causes error.
you can use 2 approaches:
create 1 global view model submodels , apply binding 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 using both script file drag , 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 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 using both script file drag , drop// <html> <body> <script src="employee.js"></script> <script src="company.js"></script> <div id="employee"></div> <div id="company"></div> </body> </html> ```
Comments
Post a Comment