如何确保在我的部分中只加载一次 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 js 也加载了。所以我最终按下了 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")