web-dev-qa-db-ja.com

ノックアウトJs「同じ要素にバインディングを複数回適用することはできません」

私は剣道モバイルアプリビルダーを使用しており、バインディングにノックアウトjsを使用していますが、エラーが発生します "同じ要素にバインディングを複数回適用することはできません"。私のコードの下に、バインディングを構成する2つのJavaScriptファイルがあります

//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>
javascriptjqueryknockout.jsknockout-mapping-plugin
7
kitty sarvaj

「ko.applyBindings」関数は2つの引数を取ります。

applyBindings(viewModelOrBindingContext, rootNode);

最初-モデルを表示

2番目-バインディングが適用されるDOMノード

「ko.applyBindings」メソッドを2回呼び出します-両方の関数で、最初のパラメーターのみを指定します。つまり、2つの異なるモデルを同じノード（ドキュメントルート）にバインドします。これによりエラーが発生します。

次の2つの方法を使用できます。

  • サブモデルを含む1つのグローバルビューモデルを作成し、バインドを1回だけ適用します。

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

  • 異なるノードにバインディングを適用します。

「」

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

「」

15
TSV

バインディングを複数回適用します。最初にバインディングをクリアする必要があります。

以下のように

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

その後、同じ要素にバインドを再度適用できます。

2
Sandeep Kumar