小编Tha*_*aha的帖子

Knockoutjs:从子组件调用父组件的功能

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

我是如何设计的: 我有两个淘汰组件.

my-widget-list:VO将有一个observableArray的widget对象.
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({});

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

现在,我想调用my-widget-list的deleteWidget按钮被按下时的功能.

我想过