从视图中调用Plain JS函数

时间:2018-05-31 10:55:31

标签: elixir phoenix-framework

我无法理解如何在视图中调用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>

任何人都可以解释,为什么这会失败以及如何让这个工作?

1 个答案:

答案 0 :(得分:3)

在使用之前,您需要使用require实际导入模块:

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

在调用app.js函数之前,请确保已加载require,否则将会定义require抱怨。