使用aurelia slickgrid从上下文菜单回调访问视图模型

在我正在进行的一个项目中，我试图用aurelia slickgrid替换aurelia表。我有许多操作是在用户单击表的一部分时触发的。我认为上下文菜单是一种复制这种行为的方法，但在菜单命令的回调中，您似乎没有访问视图模型的权限。例如，我希望能够允许用户从网格更改客户的状态，但要做到这一点，我必须调用将更新发送到服务器的函数

我的解决方案是在命令项定义中添加对视图模型的引用。我的问题是，这是正确的处理方式吗

谢谢，

---

Ross

您可能应该使用单元格菜单而不是上下文菜单，它们是用相同的结构构建的（我知道，因为我创建了这些插件），唯一的区别是单元格菜单（也称为操作菜单）可以是1（或更多）列在网格中，虽然上下文菜单仅通过从任意位置单击鼠标右键可用，但在网格中根本不可见（简而言之，如果要显示列，请使用单元格菜单或其他上下文菜单，它们的用途不同，Cel菜单通常用于当前行操作，而上下文菜单用于整个网格）

当你说视图模型在上下文菜单中不可访问时，这不是完全正确的，首先我不确定你指的是item对象，如果是这种情况，那么它在第二个参数

args.dataContext

中可用，但如果你真的指的是Aurelia ViewModel的ViewModel类，然后用

绑定到它。绑定（this）

或内联使用它

导出类MyDemo{
initializeGrid（）{
this.gridOptions={
上下文菜单：{
命令：myExternalContextMenu.bind（this），//将this绑定到外部函数
}
};
}
无论什么（）{}
}

外部文件

导出函数myContextMenu（e，args）{
const item=args.dataContext；
this.whatever（）；//MyDemo类由于其有界上下文而可用
}

如果我们以单元格菜单（操作菜单列）为例，我们可以这样写

this.columnDefinitions=[
{id:'firstName'，字段：'firstName'，名称：'firstName'}，
{id:'lastName'，字段：'lastName'，名称：'lastName'}，
//…更多列定义
{
id:'action'，name:'action'，field:'action'，宽度：110，最大宽度：200，
excludeFromExport:true，//通常不希望导出此列
格式化程序：actionFormatter，//自定义格式化程序
手机菜单：{
行动：（e，args）=>{
console.log（args.dataContext，args.column）；//操作回调..执行一些操作
}
}
}
};

如果要从单元格菜单操作回调更改网格中的值，可以通过SlickGrid DataView对象进行更改，该对象可从

args.grid

间接访问，我的意思是间接访问，因为您需要从网格对象获取该值，然后再从该对象获取DataView对象

操作：（\u事件，参数）=>{
const dataContext=args.dataContext；
常量网格=args.grid；
const dataView=args.grid.getData（）；//由于我们使用dataView，getData（）将返回dataView
dataView.updateItem（{…dataContext，状态：true}）；//更新状态标志
grid.invalidateRow（args.row）；//使该行无效将重新呈现该特定行
}

但实际上还有另一种更简单的方法来更改item dataContext的属性。单元格菜单（和上下文菜单）都有一个被称为选项列表的内容，该列表是为更新item对象（数据上下文）中的内容而创建的

例如，如果您想更改标志，可以这样做

this.columnDefinitions=[
{id:'firstName'，字段：'firstName'，名称：'firstName'}，
{id:'lastName'，字段：'lastName'，名称：'lastName'}，
//…更多列定义
{
id:'action'，name:'action'，field:'action'，宽度：110，最大宽度：200，
excludeFromExport:true，//通常不希望导出此列
格式化程序：actionFormatter，//自定义格式化程序
手机菜单：{
optionTitle:'更改工作驱动标志'，//可选，添加标题
optionItems:[
{option:true，title:'true'，iconcsclass:'fa-check-square-o'}，
{option:false，title:'false'，iconcsclass:'fa-square-o'}，
{分隔符：true，命令：“”，位置顺序：60}，
],
}
}
};

生成以下菜单时，选项始终位于菜单的顶部

此答案中显示的所有代码都来自于此，显示了单元格菜单和上下文菜单及其关联的和

---

最后，我会说Aurelia Slickgrid（我是该书的作者）是SlickGrid之上的一个包装器。如果你搜索足够多，你会发现你可以通过使用SlickGrid word进行搜索来完成几乎所有的事情，而且你会找到很多。有多种方法可以完成你想做的事情，在许多情况下，请记住使用常规JavaScript也会对你有所帮助（

.bind（this）

就是其中之一）

您可能应该使用单元格菜单而不是上下文菜单，它们是以相同的结构构建的（我知道，因为我创建了这些插件），唯一的区别是单元格菜单（也称为操作菜单）可以是1（或更多）列在网格中，虽然上下文菜单仅通过从任意位置单击鼠标右键可用，但在网格中根本不可见（简而言之，如果要显示列，请使用单元格菜单或其他上下文菜单，它们的用途不同，Cel菜单通常用于当前行操作，而上下文菜单用于整个网格）

当你说视图模型在上下文菜单中不可访问时，这不是完全正确的，首先，我不确定你指的是item对象，以及这是否是