使用 wiselink 在模板中嵌入 javascript答案

【问题标题】：embedding javascript in templates using wiselinks使用 wiselink 在模板中嵌入 javascript
【发布时间】：2014-04-03 21:26:50
【问题描述】：

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

天真地，我想做的是这样的：

模板

....
- content_for :subscript do
    :javascript
        $(function() {
            // do stuff
        }

content_for :subscript 将 js 放在文档的底部，因此它可以快速加载以用于常规 http 请求。

$(function() { ... }是等到DOM加载完毕再执行内层js。

很遗憾，这不起作用有两个原因：

content_for 行将被 wiselinks 请求忽略，因为它不是渲染到布局中，它只是渲染模板。
$(function() { ... } 位只会在 jQuery ready 事件被触发并且不会在 wiselinks 请求时被触发。

我可以通过定义一个辅助方法wise_content_for 来解决第一个问题，该方法与 content_for 类似，但它返回其内容以直接在页面上呈现以用于 wiselinks 请求。现在我可以执行以下操作：

= wise_content_for :subscript do
    ...

我可以通过在第一个 DOM 加载时触发 page:always 然后将我的 js 代码包装在其中来解决第二个问题：

布局

...
:javascript
    $(function() {
        wiselinks = new Wiselinks($('#wiselinks-container'));
        $(document).trigger('page:always')
    }
...

模板

= wise_content_for :subscript do
    :javascript
        $(document).on('page:always', function() {
            // do stuff
        }

但是...// do stuff 现在将在第一次调用后对每个 wiselinks 请求执行。这对于某些代码来说是不可取的，因此我正在寻找一种方法来确保每个模板的 js 代码仅在该模板被渲染时才被执行。

有人知道怎么做吗？

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

【问题讨论】：

标签： javascript ruby-on-rails wiselinks

【解决方案1】：

这是我想出的：

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

布局

: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
    });

application_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

【讨论】：