Knockoutjs：從子組件調用父組件的功能

Question

問題：我正在嘗試構建一個小部件儀表板。 每個小部件的標題上都有一個刪除按鈕。 單擊此按鈕時，相應的小部件必須消失。

我是如何設計的：我有兩個淘汰組件。

1. my-widget-list：VO將有一個observableArray的widget對象。
2. my-widget：VO將在窗口小部件中顯示詳細信息。

注意：為簡單起見，我只用數字替換widget對象。

 ko.components.register('my-widget-list', { viewModel : function(params) { var self = this; self.values = ko.observableArray([10,20,30,40,50]); self.deleteWidget = function(obj) { self.values.remove(obj); } }, template: {element: 'my-widget-list-template'} }); ko.components.register('my-widget', { viewModel : function(params) { var self = this; self.value = params.value; }, template: {element: 'my-widget-template'} }); ko.applyBindings({}); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <my-widget-list></my-widget-list> <script id="my-widget-list-template" type="text/html"> <div data-bind="foreach:values"> <my-widget params="value: $data"></my-widget><br> </div> </script> <script id="my-widget-template" type="text/html"> <span data-bind="text: value"></span> <button data-bind="click: $parent.deleteWidget">Delete</button> </script> 

現在，我想在單擊按鈕時調用my-widget-list的deleteWidget函數。

我想過

• 將父視圖模型引用傳遞給子項
• 將子組件的params屬性中的父函數作為回調傳遞

但我希望從專家那里知道實現這一目標的最佳方法。

JsFiddle鏈接

提前致謝

Answer 1

您可以將父項作為參數傳遞給子項：

 ko.components.register('my-widget-list', { viewModel : function(params) { var self = this; self.values = ko.observableArray([10,20,30,40,50]); self.deleteWidget = function(obj) { self.values.remove(obj); } }, template: {element: 'my-widget-list-template'} }); ko.components.register('my-widget', { viewModel : function(params) { var self = this; self.value = params.value; self.remove = function () { params.parent.deleteWidget(self.value); }; }, template: {element: 'my-widget-template'} }); ko.applyBindings({}); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <my-widget-list></my-widget-list> <script id="my-widget-list-template" type="text/html"> <div data-bind="foreach:values"> <my-widget params="value: $data, parent: $parent"></my-widget><br> </div> </script> <script id="my-widget-template" type="text/html"> <span data-bind="text: value"></span> <button data-bind="click: remove">Delete</button> </script> 

但我不確定這是不是一個好主意，因為它不必要地將孩子與父母聯系在一起。

我建議在父級中實現“刪除”按鈕，即在<my-widget-list> ，這樣小部件可以在沒有小部件列表的情況下（或者在結構不同的情況下）存在，而小部件列表在控制其子女。

比較窗口管理器：它們以相同的方式工作。 窗口管理器繪制框架和最小化/最大化/關閉按鈕，而窗口內容由相應的子進程繪制。 這種邏輯在你的場景中也是有意義的。

---

父級中使用removeWidget控件的替代實現：

 ko.components.register('my-widget-list', { viewModel : function(params) { var self = this; self.values = ko.observableArray([10,20,30,40,50]); self.deleteWidget = function(obj) { self.values.remove(obj); } }, template: {element: 'my-widget-list-template'} }); ko.components.register('my-widget', { viewModel : function(params) { var self = this; self.value = params.value; }, template: {element: 'my-widget-template'} }); ko.applyBindings({}); 

 .widget-container { position: relative; display: inline-block; padding: 10px 5px 5px 5px; margin: 0 5px 5px 0; border: 1px solid silver; border-radius: 2px; min-width: 40px; } .widget-buttons { position: absolute; top: 2px; right: 2px; } .widget-buttons > button { font-size: 2px; padding: 0; height: 15px; width: 15px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <my-widget-list></my-widget-list> <script id="my-widget-list-template" type="text/html"> <div class="widget-list" data-bind="foreach:values"> <div class="widget-container"> <div class="widget-buttons"> <button data-bind="click: $parent.deleteWidget">X</button> </div> <my-widget params="value: $data"></my-widget> </div> </div> </script> <script id="my-widget-template" type="text/html"> <div class="widget"> <span data-bind="text: value"></span> </div> </script>