Aurelia:从子VM中访问父VM方法

Aurelia: Accessing parent VM method from within child VM

本文关键字:VM 方法 访问 从子 Aurelia      更新时间:2023-10-07

使用列表的常见用例是从列表项中访问列表的方法。例如:项目项具有从包含列表中删除自身的选项。我想知道我下面描述的Aurelia模式是否有效,或者可能有更好的解决方案。

在Aurelia我有以下设置:

包含列表:(project-list.html和projectList.js)

<template>      
  <div class="projects">
    <input value.bind="newProjectName" placeholder="New project name"/>
    <project-item repeat.for="project of projects" project.bind="project"></project-item>
  </div>
</template>

以及子项:(projectItem和projectItem.js)

<template>
  <span class="title">
    ${project.name} <i click.delegate="deleteProject(project)" class="icon-trash"></i>
  </span>
</template>

在这种情况下,deleteProject(project)是projectList VM:的成员

function deleteProject(project){
    var index = this.projects.indexOf(project);
    if (index>-1){
        this.projects.splice(index,1)
    }
}

不幸的是,正如我从这个问题中了解到的那样https://github.com/aurelia/framework/issues/311,那行不通了。

作为解决方案,我可以在项目项VM:上绑定一个函数

@bindable delete: Function;

以及在项目列表模板中:

<project-item repeat.for="project of projects" project.bind="project" delete.bind="deleteProject"></project-item>

这确实有效,只要绑定函数是一个带有闭包的赋值属性:

deleteProject = function(project : Projects.Project){
        var index = this.projects.indexOf(project);
        if (index>-1){
            _.remove(this.projects,(v,i)=>i==index);
        }
    }

需要闭包来访问正确的上下文(this是项目列表)。使用

function deleteProject(project)

this将引用项目项的上下文。

尽管这座建筑是可行的,而且在管道方面没有太多开销,但在我看来,它有点脆弱:

  • 指定的函数很难与正则类函数区分开来
  • 绑定函数和列表项似乎有点"过头了"

或者我可能缺少一个Aurelia冒泡机制,该机制使访问父VM由框架处理?

回答后编辑:根据@Sylvain的回答,我制作了一个GistRun,它实现了一个带有添加和删除功能的骨架列表和列表项实现:

Aurelia Skeleton列表项实现

以下是传递对函数引用的几种替代方法:

  • 让子组件使用EventAggregator单例实例广播公共事件,并让父组件对事件作出反应

  • 让子组件使用专用EventAggregator实例广播专用事件,并让父组件对事件作出反应

  • 让子组件广播一个DOM事件,并使用delete.call将其绑定到父组件,如下面的<project-item repeat.for="project of projects" project.bind="project" delete.call="deleteProject($even t)"></project-item>

我个人的偏好是第三种选择。对我来说,它更像是"Web组件"。