Question

我是很多javascript的新手，也是Jade模板的新手。我已经想出如何使用模板渲染一个小形式（文本框和一个按钮），我已经编译了javascript文件以在客户端上使用。我已经能够读取该html模板并将其放入消费网页中的div中并正确显示。

{
html = template()
document.getElementById("container").innerHTML=html;
}

这是我无法弄清楚的：

我希望使用网页的其他区域能够订阅该按钮上的点击事件。我根本不清楚如何在此按钮上发出某种事件通知，因此当单击该按钮时，将会通知听众在单击该按钮时在框中键入的内容。

在消费网页级别，我想我可以运行某种事件监听器，让订阅者听取并在该级别得到通知。但是，我希望能够将其视为一个“组件”。并直接订阅模板生成的事件...

长话短说，有没有办法添加像＆＃39; addListener＆＃39;等功能。到模板中的这个按钮？由于模板只生成一串html而不是一个对象，所以我有点不知所措。

我是否尝试做一些超出模板范围的事情？我应该使用什么来将我的代码分成一个＆＃39;组件＆＃39;可以在其自己的页面中呈现或加载到消费网页中，并订阅事件？

感谢任何指导。

--- --- EDIT 这里有一些代码可能会更多地展示我想要完成的事情。这不符合预期......我希望它能说明我之后的情况。基本上我希望模板中生成的代码成为我可以订阅事件的对象。我不认为这是可能的，但如果有人可以引导我走另一个方向那将是伟大的！感谢

main.html - 显示我希望如何向组件添加侦听器

{
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Main Content</title>
  <link rel="stylesheet" type="text/css" href="main.css">
  <link rel="stylesheet" href="bootstrap-3.3.4-dist/css/bootstrap-theme.min.css">
  <link rel="stylesheet" href="bootstrap-3.3.4-dist/css/bootstrap.min.css">

  <script src="jquery-2.1.4.js"></script>
  <script src="bootstrap-3.3.4-dist/js/bootstrap.min.js"></script>
  <script src="jade.js"></script>
  <script src="search.js"></script>
  <script src="runtime.js"></script>

  <script>
    $(window).load(function() {
      html = search()
      alert(html)
      document.getElementById('left').innerHTML = html
    });

    searchListener = function(searchText){
      alert(searchText);
    }
    addSearchListener(searchListener);

  </script>

</head>

<body>

  <div class="row">
    <div id="left" class="col-sm-4">

    </div>
    <div id="right" class="col-sm-8">

    </div>
  </div>

</body>

</html>
}

search.html（由jade模板制作）

{
<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <link rel="stylesheet" href="search.css">
    <script src="jquery-2.1.4.js"></script>
    <script type="text/javascript">
      var listeners = [];

      function search(){
        var searchText = $('#searchText').val();
        notifySearchListeners(searchText);
      }

      function addSearchListener(listener){
        listeners.push(listener)
      }

      function notifySearchListeners(searchText){
        for (i = 0; i < listeners.length; i++) {
          listener = listeners[i];
          listener(searchText);
        }
      }

    </script>
  </head>
  <body>
    <div id="search">
      <h3>Search</h3>
      <input type="text" id="searchText">
      <button onClick="search()">Search</button>
    </div>
  </body>
</html>
}

翡翠模板事件处理

0 个答案: