分类导航

JavaScript 发布时间：2022-04-16 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了javascript – Knockoutjs：从子组件调用父组件的功能，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

问题：
我正在尝试构建一个小部件仪表板.每个小部件的标题上都有一个删除按钮.单击此按钮时,相应的小部件必须消失.

我的设计方式：
我有两个淘汰组件.

> my-widget-list：
VO将有一个observableArray的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 Link

提前致谢

解决方法

您可以将父项作为参数传递给子项：

ko.components.register('my-widget-list',50]);

        self.deleteWidget = function(obj) {
            self.values.remove(obj);
        }
    },{
    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,{
    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>