时间戳

首页 > 解决方案 > 访问包含在模板化把手页面中的按钮的 onclick 处理程序

javascript - 访问包含在模板化把手页面中的按钮的 onclick 处理程序

问题描述

我正在开发一个使用 Handlebars 的 Web 应用程序。我正在尝试从scripts.js文件（包含一些实用程序脚本、函数等）访问按钮的 onclick 事件处理程序。我有一个main.handlebars看起来像这样的：

<!DOCTYPE html>
<html lang="en">
<head>
    ... stuff ...
    <title>I'm Stupid</title>
</head>
<body >
    ... navbar ...

    <div class="container">
        {{{body}}}         <--- Important!
    </div>

    ... footer ..
</body>
</html>

这是另一个传入 {{{main}}} 的文件：

... some html ...
<input type="button" id="submit" class ="button_img_only flex-wrap btn-lg" placeholder="amount" value ="Say Hi!"/>
... more html ...

我有一个包含实用程序 javascript 文件的目录。在一个名为 的文件stripe_scripts.js中，我尝试访问submit按钮的 onclick 事件处理程序。但是，我得到一个空返回值，我认为这意味着找不到按钮？

我的问题是：如何访问按钮 onclick 处理程序？经过一番谷歌搜索，我找到了一个如下所示的解决方案：

<script id="text-template" type="text/x-handlebars-template">
  {{{main}}}      <-- ??????????????
</script>

然后访问提交按钮，使用这个：

var source   = document.getElementById('text-template').innerHTML;
var template = Handlebars.compile(source);
var context = {body: tbody};
var html    = template(context);

document.getElementById('submit').innerHTML = html;
// bind the submit buttons onclick event handler to handle clicks

我将如何在现有项目中使用上述模板？我是否需要将整个页面的 HTML 代码放入脚本标记内的 {{{main}}} 占位符中？

有没有更好的方法来使用把手？（基于此：https ://handlebarsjs.com/installation/when-to-use-handlebars.html#when-not-to-use-handlebars，Handlebars 一开始就不应该被使用）。我应该离开 Handlebars 并使用像 Angular 或 React 这样的单页架构吗？显然，我是 web 开发的新手，我可以使用一些帮助。

标签： javascriptjqueryhtmlhandlebars.js

解决方案

推荐阅读