使用WiseLink在模板中嵌入javascript

使用WiseLink在模板中嵌入javascript,javascript,ruby-on-rails,wiselinks,Javascript,Ruby On Rails,Wiselinks,我在Rails应用程序中使用Wiselinks,但当我添加更多视图模板时,我在让这些模板中的JavaScript在需要时运行时遇到了麻烦 天真地说,我想做的是: 模板 .... - content_for :subscript do :javascript $(function() { // do stuff } = wise_content_for :subscript do :javascript $(

我在Rails应用程序中使用Wiselinks,但当我添加更多视图模板时,我在让这些模板中的JavaScript在需要时运行时遇到了麻烦

天真地说,我想做的是:

模板

....
- content_for :subscript do
    :javascript
        $(function() {
            // do stuff
        }
= wise_content_for :subscript do
    :javascript
        $(document).on('page:always', function() {
            // do stuff
        }
content\u for:subscript
将js放在文档的底部,因此它可以快速加载常规http请求

$(function(){…}
将在执行内部js之前等待DOM加载

不幸的是,这不起作用有两个原因:

  • WiseLink请求将忽略行的
    content\u,因为它不是呈现到布局中,而是呈现模板

  • $(function(){…}
    位将仅在jQuery
    ready
    事件被触发时进行计算,而不会在wiselinks请求时触发

  • 我可以通过为
    定义一个帮助器方法
    wise\u content\u来解决第一个问题,该方法与content\u的工作原理类似,只是它返回其内容以直接在页面上呈现,用于wiselinks请求。现在我可以执行以下操作:

    = wise_content_for :subscript do
        ...
    
    我可以通过在第一次加载DOM时触发
    page:always
    来解决第二个问题,然后将我的js代码包装到:

    布局

    ...
    :javascript
        $(function() {
            wiselinks = new Wiselinks($('#wiselinks-container'));
            $(document).trigger('page:always')
        }
    ...
    
    :javascript
    
      function call_page_callbacks(){
        _.each(Boundless.PageCallbacks, function(callback){ callback(); }
      }
    
      $(function() {
        new Wiselinks($('#wiselinks-container'));
    
        $(document).off('page:loading').on('page:loading', function(){
          Boundless.PageCallbacks = [];
        });
    
        $(document).off('page:always').on('page:always', call_page_callbacks);
    
        call_page_callbacks();
      }
    
    模板

    ....
    - content_for :subscript do
        :javascript
            $(function() {
                // do stuff
            }
    
    = wise_content_for :subscript do
        :javascript
            $(document).on('page:always', function() {
                // do stuff
            }
    
    但是…
    //do stuff
    现在将在每个wiselinks请求第一次调用后对其执行。这对于某些代码来说是不可取的,因此我正在寻找一种方法来确保每个模板的js代码仅在呈现该模板时执行

    有人知道怎么做吗


    我正在寻找一种解决方案,使其他开发人员在处理此代码时不必担心每个模板在正常呈现时与使用WiseLink时的工作方式。

    以下是我的想法:

    我只需调用数组中定义的每个函数
    Boundless.PageCallbacks
    在第一个页面加载后和每个wiselinks请求完成后。数组在每个wiselinks请求开始时被清除,因此每次只执行当前请求期间推到数组上的代码

    布局

    ...
    :javascript
        $(function() {
            wiselinks = new Wiselinks($('#wiselinks-container'));
            $(document).trigger('page:always')
        }
    ...
    
    :javascript
    
      function call_page_callbacks(){
        _.each(Boundless.PageCallbacks, function(callback){ callback(); }
      }
    
      $(function() {
        new Wiselinks($('#wiselinks-container'));
    
        $(document).off('page:loading').on('page:loading', function(){
          Boundless.PageCallbacks = [];
        });
    
        $(document).off('page:always').on('page:always', call_page_callbacks);
    
        call_page_callbacks();
      }
    
    模板和片段

    = wise_content_for :javascripts do
    
      :javascript
    
        Boundless.PageCallbacks.push(function() {
          // do stuff
        });
    
    应用程序\u helper.rb

    def wise_content_for(name, content = nil, options = {}, &block)
      if request.wiselinks?
        if block_given?
          options = content if content
          content = capture(&block)
        end
        content
      else
        content_for name, content, options, &block
      end
    end