从视图中调用Plain JS函数

Question

我无法理解如何在视图中调用Javascript函数。 我想要实现的是一个HTML表，其中一些字段根据一些参数定期更新。

所以我需要一个带参数的函数来获取相应的HTML元素并设置elements.innerHTML的设置间隔。 到现在为止还挺好。 我有这个功能

export default function calcActual(amount, gain, time, index) {
var td;
td = document.getElementById('ressource_' + index);
  setInterval(function() {
    td.innerHTML = "actual: " + Math.round(amount + (gain / 3600) * time);
  }, Math.round(gain / 3600));}

在'priv/js/views/user_assets/rou.js'

在我的'app.js'中，我有以下内容：

import { calcActual } from './views/user_assets/rou';

据我所知，app.js中的所有代码都填充在一个模块中，所以我没有任何可能直接调用该函数。 我的下一个想法是在app.js中再次包装该函数并从那里调用它。

export var Calc = {
  calcActual: function(amount, gain, time, index) {
    calcActualRes(amount, gain, time, index)
  }
}

但是当我尝试使用以下函数调用函数时，我总是得到Calc未定义的错误：

 <td id="ressource_<%= index %>">
   actual:<script>Calc.calcActual(
                <%= amount %>,
                <%= gain %>,
                <%= NaiveDateTime.diff(NaiveDateTime.utc_now, ressource.updated_at) %>,
                <%= index %>)
    </script>
  </td>

任何人都可以解释，为什么这会失败以及如何使这个工作？

Answer 1

在使用之前，您需要使用require实际导入模块：

<script>
var calcActual = require('views/user_assets/rou');
// do your stuff with calcActual.
</script>

只需确保在调用require函数之前加载了app.js ，否则会报告require未定义。