问题: 我正在尝试构建一个小部件仪表板。每个小部件的标题上都有一个删除按钮。单击此按钮时,相应的小部件必须消失。
我是如何设计的: 我有两个淘汰赛组件。
- my-widget-list:VO 将有一个 observableArray 的小部件对象。
- my-widget:VO 将在小部件中显示详细信息。
注意:为简单起见,我将小部件对象替换为仅数字。
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
's函数。deleteWidget
我想过
- 将父视图模型引用传递给子视图
- 将子组件的 params 属性中的父函数作为回调传递
但我想从专家那里知道实现这一目标的最佳方法是什么。
提前致谢