从 <script> 调用 Aurelia 函数

Question

在我的 Aurelia 视图中，我有一个 script 标记，我想从中调用我的视图模型中的函数：

Page.html:

<template>
...
  <script>
        function beginEdit(args) {
            console.log(args);
            console.log(args.primaryKeyValue);
            //In this place I want to call the sayHello() fuction
        };
    </script>
</template>

Page.js:

import {inject} from 'aurelia-framework'
import {HttpClient} from 'aurelia-http-client';
import {Router} from 'aurelia-router';

export class Licigrid{
    constructor(){...}           
    activate(){...}
    ...
    sayHello()
    {
        alert("Hello");
    }  
}

我试图在我的脚本标签中使用 ${sayHello();} 但是这会在页面加载时立即调用该函数，而不是在用户输入 beginEdit() 函数。

我在Plunker.

中复现了这段代码

请注意，我使用的包本身会调用 beginEdit 函数，因此很遗憾，我无法在 html 标记内使用 .trigger()、.delegate() 或 .call()会解决我的问题。

我的问题是：是否有从我的脚本标签调用 sayHello() 函数的解决方案？

Answer 1

beginEdit 函数需要访问 App 视图模型实例。我们可以使用 Aurelia 的 DI 容器来检索这个：

var app = container.get(App);
app.sayHello();

问题是我们无法访问 beginEdit 函数中的容器。我们可以使用一个小技巧来访问容器：

var container = document.body.aurelia.container;

我们还需要 App 构造函数，因为它是从容器中检索应用程序实例的关键。我们可以使用System loader来加载包含App构造函数的模块：

System.import('app').then(function(module) {
  var App = module.App;
});

整体看起来像这样：

function beginEdit() {
  System.import('app').then(function(module) {
    var App = module.App, // get the constructor function
        container = document.body.aurelia.container, // get the container
        app = container.get(App);  // get the instance of App (the viewmodel)
    app.sayHello();
  });
}

这是工作插件： http://plnkr.co/edit/9c0oJmifjW5pXXdD06Hg?p=preview

从 <script> 调用 Aurelia 函数

Call a Aurelia function from <script>

javascript

aurelia