Knockoutjs:从子组件调用父组件的函数
Knockoutjs: Invoking function of parent component from child component
问题:我正在尝试构建一个小部件面板。每个小部件的标题上都有一个删除按钮。单击此按钮时,相应的小部件必须消失。
我的设计方式:我有两个淘汰组件。
- 我的小部件列表:VO将有一个小部件对象的observableArray
- 我的小工具: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
的deleteWidget
函数。
我考虑过
- 将父视图模型引用传递给子视图模型
- 将子组件的params属性中的父函数作为回调传递
但我想从专家那里了解实现这一目标的最佳方式是什么。
JsFiddle Link
提前感谢
您可以将父项作为参数传递给子项:
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>
相关文章:
- 拨打'父亲'函数形式a'儿童'ReactJS中的组件
- 如何控制组件'的createContent函数被激发
- 如何在渲染函数中检查 react 中子组件的状态
- ember-js组件初始化不同的函数
- 如何向onClick事件处理程序传递一个接受参数的函数,并且仍然将该函数绑定到组件's”;这个“;上下文
- 带有内置图像对象的Canvas组件构造函数;t显示's图像
- 如何在单击组件时调用函数
- 当写入“;函数“;在ReactJS组件中
- ES6调用扩展组件函数
- 主干调用在 React 组件函数中不起作用
- 在 Knockout 中初始化时调用组件函数
- Requirejs带有Knockout错误:无法处理绑定“;组件:函数(){return f}"-匿名定义()
- ReactJS组件函数
- 反应:“this”在组件函数中是未定义的
- 调用Coldfusion组件函数的jQuery-post方法不起作用
- 配置子组件函数,将多个参数传递给父函数
- 在Reactjs中,从函数内部调用组件函数
- 需要新语法的React/Redux组件函数
- 如何从javascript函数内部调用React组件函数
- 从dangouslysetinnerhtml中的onclick调用React组件函数