【问题标题】:Rails 4, Turbolink execute javascript after render a partialRails 4,Turbolink 在渲染部分后执行 javascript
【发布时间】:2016-08-25 01:45:33
【问题描述】:

我有一个配置了一些 javascript 的表单。 javascript 在 Turbolink 处理的加载事件中加载:

//app/assets/javascripts/init.js
var ready = function () {
    App.init(); //I configure some components of _form.html.erb partial
};
$(document).ready(ready);
$(document).on('page:load', ready);

如果我渲染一个部分,App.init() 代码不会执行并且我的应用程序配置不正确。

//new.js.erb
$("#my-modal").html("<%= j( render 'form') %>");
$("#my-modal").modal("show"); //The partial is inside a modal

我可以在部分渲染后执行代码吗? 像这样的:

$(document).on('partial:render', ready); //Concept

部分渲染后需要执行js代码,因为我需要配置一些Jquery插件来自定义模态表单。

模态是经典的 Twitter Bootstrap 模态:

//_form.html.erb
<div class="modal-dialog" role="document">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
      <div class="row">
        <div class="col-sm-offset-3 col-sm-9">
          <h3 class="modal-title" id="myModalLabel">new</h3>
        </div>
      </div>
    </div>

    <%= simple_form_for(...) do |f| %>
        <div class="modal-body">
          <ul class="errors"></ul>
          <%= f.error_notification %>

          <%= render "companies/fields", f: f %>
          ...
          ...
        </div>
    <% end %>
  </div>
</div>

【问题讨论】:

  • 你试过“page:change”而不是“page:load”
  • 是的,看下一个答案的评论

标签: javascript jquery ruby-on-rails twitter-bootstrap


【解决方案1】:

试试:

$(document).on('page:change', function () {
  // Actions to do
});

在您的情况下,只需将 js 调用中的 'page:load' 行替换为:

$(document).on('page:change', ready);

【讨论】:

  • 我无法使用您的解决方案,因为每次页面更改都会触发事件更改,但我只想在部分呈现时执行 App.init()
  • 您反对在局部视图中添加 App.init js 调用吗?
最近更新 更多