javascript - knockout : Invoking function of parent component from child component

标签 javascript knockout.js knockout-components

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

我是如何设计的: 我有两个 knockout 组件。

  1. 我的小部件列表: VO 将有一个小部件对象的 observableArray。
  2. 我的小部件: 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-listdeleteWidget 函数。

我想过

  • 将父 View 模型引用传递给 subview
  • 将子组件的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>

但我不确定这是否是个好主意,因为它不必要地将 child 与 parent 联系在一起。

我建议在父级中实现“删除”按钮,即在 <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>

关于javascript - knockout : Invoking function of parent component from child component,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31309950/

相关文章:

javascript - React 编译器不会接受我的 .map 函数作为函数

html - 使用 knockout 在变量表上进行 div 定位和缩放

javascript - KnockoutJS - Base64 动画 gif 重启动画

javascript - 具有命名模板的 Knockout 3.2 组件?

javascript - foreach 和模板中的 knockout 组件

javascript - 通过聚合名称或部分名称导入聚合

Javascript:在 <body> 标签中创建一个新的 div

javascript - MVVM:viewModel 的架构应该像 View 还是模型

knockout.js - 无法在 knockout 3.2 中使用自定义组件传递变量

javascript - 为什么 Node.JS 中这个函数没有首先加载?