如何確保我只在我的部分中加載JS文件一次？

Question

我有一個部分_dial_pad.html_erb正在被通過Ajax調用加載不止一次在相同的觀點，使用類似：

$('#some_div').html("<%= escape_javascript(render(partial: 'dial_pad')) %>"); 

的dial_pad部分包括：

<%= stylesheet_link_tag 'dial_pad' %> 
<%= javascript_include_tag "dial_pad" %> 

<center> 
    <div id="main-wrapper" > 
    <section role="main"> 
     <div class="dialPad compact">  
     <div class="dials"> 
      <ol> 
      <li class="digits one"> 
       <p><strong>1</strong></p> 
      </li> 
      <li class="digits two"> 
       <p><strong>2</strong></p> 
      </li> 
      </ol> 
     </div> 
     </div> 
    </section> 
    <br/> 
    </div> 
</center> 

的dial_pad.js.coffee看起來像這樣：

jQuery -> 

    $(document).keydown (e) -> 
    key = String.fromCharCode(e.keyCode)  

    if key=='1' 
     alert("1") 

    if key=='2' 
     alert("2") 

現在，當dial_pad部分加載dial_pad j也加載了。所以我最後按1，例如警報觸發兩次。

如何確保dial_pad.js只加載一次，而不是每當爲視圖添加部分時都加載？

Answer 1

您可以在加載時設置窗口屬性，然後在綁定keydown之前檢查該屬性。

jQuery -> 

    unless window.dialPadIsLoaded 
     window.dialPadIsLoaded = yes 

     $(document).keydown (e) -> 
      key = String.fromCharCode(e.keyCode)  

      if key=='1' 
       alert("1") 

      if key=='2' 
       alert("2")