Question

我正在将前端项目迁移到rails。我有两条路线，/ home和/ home / new。 / home视图有一个转到/ home / new视图的链接。如果我手动输入地址栏上的路线，一切都会完美呈现。如果我通过/ home视图上的链接进入视图，jQuery事件将无法正常运行，导致依赖于它们的样式无法正常工作。控制台中没有错误。任何人都可以帮助我吗？

链接到github存储库：https://github.com/rimildeyjsr/sms-scheduler

这是样式应该呈现的方式：

通过以下链接访问我们如何呈现它：

application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>SmsScheduler</title>
    <%= csrf_meta_tags %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

    <%= stylesheet_link_tag "https://fonts.googleapis.com/icon?family=Material+Icons" %>
    <%= stylesheet_link_tag "https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en" %>
    <%= stylesheet_link_tag "https://fonts.googleapis.com/css?family=Roboto+Mono" %>


  </head>

  <body>
    <%= yield %>
  </body>
</html>

assets.rb：

# Be sure to restart your server when you modify this file.

# Version of your assets, change this if you want to expire all your assets.
Rails.application.config.assets.version = '1.0'
Rails.application.config.assets.precompile += %w( mdDateTimePicker.css )
Rails.application.config.assets.precompile += %w( style.css )
Rails.application.config.assets.precompile += %w( mdDateTimePicker.js )
Rails.application.config.assets.precompile += %w( app.js )
Rails.application.config.assets.precompile += %w( home.style.css )
# Add additional assets to the asset load path
# Rails.application.config.assets.paths << Emoji.images_path

# Precompile additional assets.
# application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
# Rails.application.config.assets.precompile += %w( search.js )

application.css

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require jquery-ui
 *= require material
 *= require mdDateTimePicker
 *= require_tree .
 *= require_self
 */

的application.js

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require material
//= require moment
//= require draggabilly.pkgd
//= require mdDateTimePicker
//= require turbolinks
//= require_tree .

routes.rb中：

Rails.application.routes.draw do
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
  get '/home', to: 'home#index'
  get '/home/new', to: 'home#new'
end

app.js

ready = function(){
    $('.mdl-card__supporting-text').hide();
    var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
    $('#fab').click(function(){

        var innerHtml = $('#fab .material-icons').html();
        if (innerHtml === 'add'){
            console.log(2);
            $('#fab').css('background-color','green');
            $('#fab .material-icons').html('check circle');
            $('.mdl-card__supporting-text').show();
            $('.mdl-card__title').hide();
        }

        else {
            $('.mdl-card__supporting-text').hide();
            $('#fab').css('background-color','#ed2553');
            $('#fab .material-icons').html('add');
            $('.mdl-card__title').show();
            $('#title-text').text('Campaign added!');
        }

    });

    $('#sms-msg').keyup(function(){
        var Length = $('#sms-msg').val().length;
        var pageBreak = Math.floor((Length/160));
        $('#break-msg').val(pageBreak+1);
    });

    var inputStartDate = document.querySelector('#start-date');
    var outputStartDate = document.querySelector('#start-date-label');

    var inputEndDate = document.querySelector('#end-date');
    var outputEndDate = document.querySelector('#end-date-label');

    var inputStartTime = document.querySelector('#start-time');
    var outputStartTime = document.querySelector('#start-time-label');


    var dialogStartDate = new mdDateTimePicker.default({
        type: 'date',
        orientation: 'PORTRAIT',
        past: moment().subtract(150,'years'),
        future: moment().add(50,'years')
    });

    dialogStartDate.trigger = inputStartDate;

    if (inputStartDate) {
        inputStartDate.addEventListener('click', function() {
            dialogStartDate.toggle();
            $('.container-div').toggle();
        });

        inputStartDate.addEventListener('onOk', function() {
            var startDate = dialogStartDate.time.toString();
            var startDateFormat = moment(startDate).format('LL');
            outputStartDate.innerHTML = startDateFormat;
            $('#start-date-label').css('color','blue');
            $('.container-div').show();
        });

        inputStartDate.addEventListener('onCancel',function(){
            $('.container-div').show();
        });
    }




    var dialogEndDate = new mdDateTimePicker.default({
        type: 'date',
        orientation: 'PORTRAIT',
        past: moment().subtract(150,'years'),
        future: moment().add(150,'years')
    });

    dialogEndDate.trigger = inputEndDate;

    if (inputEndDate) {
        inputEndDate.addEventListener('click', function() {
            dialogEndDate.toggle();
            $('.container-div').toggle();
        });

        inputEndDate.addEventListener('onOk', function() {
            var endDate = dialogEndDate.time.toString();
            var endDateFormat = moment(endDate).format('LL');
            outputEndDate.innerHTML = endDateFormat;
            $('#end-date-label').css('color','blue');
            $('.container-div').show();
        });

        inputEndDate.addEventListener('onCancel',function(){
            $('.container-div').show();
        });
    }



    var dialogStartTime = new mdDateTimePicker.default({
        type: 'time',
        orientation: 'PORTRAIT',
    });

    dialogStartTime.trigger = inputStartTime;

    if (inputStartTime) {
        inputStartTime.addEventListener('click', function() {
            dialogStartTime.toggle();
            $('.container-div').toggle();
        });

        inputStartTime.addEventListener('onOk', function() {
            $('.container-div').show();
            var startTime = dialogStartTime.time.toString();
            var startTimeFormat = moment(startTime).format('LTS');
            outputStartTime.innerHTML = startTimeFormat;
            $('#start-time-label').css('color','blue');
        });

        inputStartTime.addEventListener('onCancel',function(){
            $('.container-div').show();
        });
    }



}

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

Answer 1

您的mdDateTimePicker文件/文件是否丢失/未加载位于项目目录中？它不包含在github repo中。

Answer 2

事实证明，从项目中删除turbolinks，完全解决了问题！

删除gem'turbolinks'，'〜＆gt; 5'来自Gemfile。

删除// =需要来自你的application.js

的turbolinks

Application.html.erb

<%= stylesheet_link_tag    'application', media: 'all' %>
<%= javascript_include_tag 'application', %>

Ruby on Rails - jQuery事件无法正常工作

2 个答案: