Question

我有一段视图（html），由viewmodel / class以编程方式生成。这使用Aurelia DOM（Aurelia Docs - pal :: Dom）功能生成原始HTML元素并将其添加到视图中。

但是，我无法在生成的html中获取事件以回调到viewmodel。一个例子：

let deleteButton = this.dom.createElement("button");
deleteButton.setAttribute("onclick", "cancelCreditNote(`${ row.creditNoteId }`)");

单击生成的按钮不会回调到具有cancelCreditNote功能的viewmodel。其他诸如deleteButton.setAttribute("click.delegate", "cancelCreditNote('${ row.creditNoteId }')");之类的东西也不起作用。

是否有人知道如何从essentiall＆＃39; raw＆＃39;访问viewmodel类。 aurelia中的HTML？

不幸的是，在这个例子中，我不能使用标准的aurelia模板来生成HTML。

Answer 1

PAL上的DOM属性只是浏览器DOM对象的抽象，创建元素可能只是调用document.createElement，它不支持任何Aurelia绑定到创建的元素。

您可以尝试使用aurelia.enhance(context, element)来获取现有的DOM元素并通过模板引擎运行它。

使用此方法，您还可以传递绑定上下文以应用于元素。

Answer 2

在我的HTML中，我使用了这个：

<div id="collapsesidebar" click.delegate="toggleSidebar()">

在我的视图模型中，我有这个方法：

toggleSidebar(){
    alert('hi');
}

您也可以使用JQuery这样的视图模型执行此操作：

attached() {
    $('main').on('click', ()=> alert('hi'));
}

最后一个选项仅在触发attached()方法后可用：在此之前，绑定需要完成其工作，并且仅在此之后元素位于dom内部。

换句话说：不起作用

activate(){
    $('main').on('click', ()=> alert('hi'));
}

因为constructor和activate方法在<{strong> attached方法之前都被触发了。

Aurelia - 从生成的DOM元素

2 个答案: