onClick in _template lodash

Question

私はいくつかのhtmlがボタンでレンダリングされる_テンプレートを持っています。今、私は実装されている私の_.template

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

do_search()で

のonClick

の機能を呼び起こすしたいが、私は、コードを実行したとき、私は未定義またはnull参照の実行時例外 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>