Javascript无法在渲染部分工作

Question

我试图在partial page

中准备好包含一些JS文件并在DOM上执行JS脚本

但它没有用。

如果我将JS code block移动到布局页面，它就会起作用。

但我不想在每个页面中执行JS代码。

有什么想法吗？

索引页

= render 'data_range'

部分页面：_data_range.html.haml（不工作）

    %script{:src => asset_path("kode/js/date-range-picker/daterangepicker.js"), :type => "text/javascript"}
    = javascript_include_tag 'common'
    / = javascript_include_tag params[:controller]
    :javascript
      $(document).ready(function() {
        $('#date-range-picker').daterangepicker(null, function(start, end, label) {
          console.log(start.toISOString(), end.toISOString(), label);
        });
      });

布局页面：layouts / application.html.haml（works !!）

!!!
%html
  %head
    %title= t("site_name")
    = render 'layouts/mobile/common_header'
    = stylesheet_link_tag    "application" 
    = javascript_include_tag params[:controller]
  %body
    = yield
    %script{:src => asset_path("kode/js/date-range-picker/daterangepicker.js"), :type => "text/javascript"}
    = javascript_include_tag 'common'
    / = javascript_include_tag params[:controller]
    :javascript
      $(document).ready(function() {
        $('#date-range-picker').daterangepicker(null, function(start, end, label) {
          console.log(start.toISOString(), end.toISOString(), label);
        });
      });

Answer 1

我认为，最简单的方法是在布局页面上单独使用JavaScript。这就是我所做的（简化）：

创建部分views/application/_javascript.html.haml

= javascript_include_tag 'common'
= javascript_include_tag params[:controller] 
= yield :additional_js

在身体的末尾将此部分添加到布局

!!!
%html
  %head
    %title= t("site_name")
    = render 'layouts/mobile/common_header'
    = stylesheet_link_tag    "application" 
  %body
    = yield
    = render 'javascript'

现在在您的部分_data_range.html.haml中执行content_for

- content_for :additional_js do
  %script{:src => asset_path("kode/js/date-range-picker/daterangepicker.js"), :type => "text/javascript"}

  :javascript
    $(document).ready(function() {
      $('#date-range-picker').daterangepicker(null, function(start, end, label) {
        console.log(start.toISOString(), end.toISOString(), label);
      });
    });

通过这种方式，您可以编写特定于页面的JavaScript并将其呈现在布局中。希望这会有所帮助。

Answer 2

将您的js代码放置在局部代码中，因此，每当部分加载到页面中时，就会执行js代码。