Question

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

天真，我想做的是：

模板

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

content_for :subscript将js放在文档的底部，以便快速加载常规的http请求。

$(function() { ... }是在执行内部js之前等待DOM加载。

不幸的是，这不起作用有两个原因：

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

我可以通过定义一个与content_for类似的辅助方法wise_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代码仅在呈现该模板时执行。

任何人都知道如何做到这一点？

我正在寻找一种解决方案，允许其他开发此代码的开发人员不必担心每个模板在正常渲染时与每个模板的工作方式之间的关系。

Answer 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

使用wiselinks在模板中嵌入javascript

1 个答案: