使用“with”綁定的 Knockout js 組件未按預期運行

Question

我從 JSFiddle 設置了以下代碼： https ://jsfiddle.net/ktce56hr/2/

 var RootViewModel = function() { var self = this; this.rootText = ko.observable('default text'); this.rootFunc = function() { alert("root func!"); }; } ko.components.register('root', { viewModel: function(model) { var self = this; this.rootViewModel = model; this.title = ko.observable('default title'); }, template: { element: 'root_template' } }); $(function () { ko.applyBindings(new RootViewModel()); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script> <div data-bind="component: { name: 'root', params: { model: $root } }"></div> <script id="root_template" type="text/html"> <div> <span data-bind="text: title"></div> <div data-bind="with: rootViewModel"> <input type="text" data-bind="value: rootText" /> <button data-bind="click: rootFunc">Go</button> </div> </div> </script>

運行此代碼時，我收到以下錯誤：

 Uncaught ReferenceError: Unable to process binding "with: function (){return rootViewModel }" Message: Unable to process binding "value: function (){return rootText }" Message: rootText is not defined

有人可以解釋為什么我不能在組件視圖模型上使用“rootViewModel”屬性設置綁定上下文嗎？

Answer 1

您正在像這樣聲明組件實例：

<div data-bind="component: { name: 'root', params: { model: $root } }"></div>

params將是 viewmodel 構造函數的第一個參數。 對於視圖模型構造函數，它看起來像這樣：

"model": {
  "rootText": "default text"
}

它返回的視圖模型將是這樣的：

{
  "rootViewModel": {
    "model": {
      "rootText": "default text"
    }
  },
  "title": "default title"
}

當然，在您的視圖中訪問title是有效的。 但里面with: rootViewModel它不會包含rootText 。

修復很簡單：

<div data-bind="component: { name: 'root', params: $root }"></div>

 var RootViewModel = function() { var self = this; this.rootText = ko.observable('default text'); this.rootFunc = function() { alert("root func!"); }; } ko.components.register('root', { viewModel: function(model) { var self = this; this.rootViewModel = model; this.title = ko.observable('default title'); }, template: { element: 'root_template' } }); $(function () { ko.applyBindings(new RootViewModel()); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script> <div data-bind="component: { name: 'root', params: $root }"></div> <script id="root_template" type="text/html"> <div> <span data-bind="text: title"></div> <div data-bind="with: rootViewModel"> <input type="text" data-bind="value: rootText" /> <button data-bind="click: rootFunc">Go</button> </div> </div> </script>

PS： rootFunc仍然存在類似的問題，但我相信您可以解決這個問題。