javascript - 有没有办法获取选项标签值并将其传递给 Handlebars 中的助手?

标签 javascript html node.js express handlebars.js

我正在使用 Express 和 Handlebars ,所以我有一个 View ,当客户端从 select 标签中选择一个选项时,我想在给定的事件中显示一些信息,首先,我对此有一些疑问:

  1. 是否可以获取选项标签值并将其发送到助手中?
  2. 有没有办法在 onChange 事件触发时调用助手?

我试图让帮助程序可以通过 View html 中包含的脚本进行访问,但后来我意识到这与在应用程序上声明它是一样的。 还尝试使用 javascript 获取标签值并将其返回到 html,但这也不起作用。

<div class="col-sm-3">
    <div>
      <label for="zoneSelect"><span class="control-label badge badge-light">Zone monitoring</span></label>
    </div>
    <div>
      <select id="zoneSelect" class="custom-select" onchange="{{eventHandler selectedOptionValue }}">
        {{getZones zones}}
      </select>
     </div>
</div>
getZonas: function(zonas) {
    var str;

    zonas.forEach(element => {
      str += '<option value="'+element._id+'">' + element.nombre + '</option>';
    });
   return new Handlebars.SafeString(str);
}

因此,我的想法是从选择中发送选定的选项,并将其发送到处理该信息的帮助程序,如代码中所示。

上面的帮助器是为选择下拉列表构建选项标签,区域是从数据库检索的 json 数据。

最佳答案

看起来你搞乱了前端和后端。事件处理发生在前端。处理代码应该是您 View 的一部分,而不是后端。

<script>
  function onZoneSelect (value) {
      // Real action here
      console.log('ZONE', value);
  }
</script>

<select id="zoneSelect" class="custom-select" onchange="onZoneSelect(this.value)">
  <!-- This code could be generated on backend with handlebars -->
  <!-- BEGIN -->
  <option value="Z01">Zone 01</option>
  <option value="Z02">Zone 02</option>
  <option value="Z03">Zone 03</option>
  <option value="Z04">Zone 04</option>
  <option value="Z05">Zone 05</option>
  <!-- END -->
</select>

关于javascript - 有没有办法获取选项标签值并将其传递给 Handlebars 中的助手?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57719566/

相关文章:

node.js - 在AWS Lambda中使用JavaScript eval()

javascript - 以 '09:00 AM' 格式对包含时间的字符串数组进行排序?

javascript - 从 Ajax Post 请求访问 Node.js 服务器上的字符串

html - 在网格布局中添加到图形元素的额外间隙

node.js - 尝试以多对多关系创建一个实例和多个相关实例

javascript - 循环中发出的异步请求是否保证按照循环执行的顺序排队?

javascript - jQuery 数据表过滤具有特定类的行

javascript - 第二个 promise 决定不解雇

javascript - 如何使用javascript更改或替换div、row下的文本

javascript - 使用 Angular.js 拆分 &lt;input type ="text">