从<script>调用Aurelia函数

Question

在我的Aurelia视图中,我有一个脚本标记,我想从我的视图模型中调用一个函数:

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构造函数,因为它是从容器中检索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