Aurelia:从子VM中访问父VM方法
Aurelia: Accessing parent VM method from within child VM
使用列表的常见用例是从列表项中访问列表的方法。例如:项目项具有从包含列表中删除自身的选项。我想知道我下面描述的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组件"。
- electronic BrowserWindow的最小高度和宽度在hide()show()方法之后不起作用
- 有没有任何方法可以将控制器从文件加载到ui路由器$stateProvider中
- 数组在递归方法中设置为null
- 打破承诺链的好方法是什么
- 在使用Polymer'加载所有json文件后执行方法;s的核心ajax
- 使用“;这个“;JavaScript原型方法中的关键字
- 序列化数据属性中对象的最可靠方法
- 使用Objective-C的JavaScript注入方法
- 有没有一种方法可以添加相同的项目val=“0”;4〃;到JavaScript中数组的每个对象
- 有没有一种方法可以防止img get请求使用css或js发生
- Javascript,有没有一种方法可以将数组写成没有逗号或空格的单个文本字符串
- toBoolean方法类似于toString
- 如何在单击复选框后调用控制器方法
- 是否有任何方法可以使用jQuery替换在数组中定义值的文本
- 递归使用 eval() 是检查程序执行的好方法吗?
- 如何在webView,Android中从@JavascriptInterface方法调用Javascript
- toLocaleDateString和toLocaleString方法不尊重机器时区
- Aurelia:从子VM中访问父VM方法
- Node.js vm和外部方法
- 如何从.vm文件的javascript中调用java方法