onClick in _.template lodash

Question

我有一个_.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()

Answer 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>