onClick in _.template lodash答案

【问题标题】：onClick in _.template lodashonClick in _.template lodash
【发布时间】：2018-05-31 22:44:36
【问题描述】：

我有一个 _.template，其中一些 html 是用一个按钮呈现的。现在我想在 onClick 上调用一个函数

在我的 _.template 中

    <span class="input-group-btn">\
        <button class="btn-primary" type="button" onClick="do_search()"><span class="searching"></span></button>\
    </span>\

do_search() 已实现，但是当我运行代码时，我得到一个运行时异常 do_search() 未定义或空引用。在文件脚本块 [动态] 中自动生成一种新方法。如何绑定此方法以使用现有方法？我什至试过this.do_search()

【问题讨论】：

标签： javascript jquery lodash

【解决方案1】：

onClick() 属性只能访问全局 (window) 范围内的方法：

function do_search() {
  alert('yey');
}

var str = '<span class="input-group-btn">\
               <button class="btn-primary" type="button" onClick="do_search()">\
               <span class="searching">Search</span></button>\
           </span>';
           
var compiled = _.template(str)({});

target.innerHTML = compiled;

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>

<div id="target"></div>

通常事件处理程序使用addEventListener()附加到这种模板：

(function() {

  var str = '<span class="input-group-btn">\
               <button class="btn-primary search" type="button">\
               <span class="searching">Search</span></button>\
           </span>';

  var compiled = _.template(str)({});

  demo.innerHTML = compiled;

  var searchBtn = document.querySelector('.search');

  function do_search() {
    alert('yey');
  }

  searchBtn.addEventListener('click', do_search);

})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>

<div id="demo"></div>

【讨论】：