Question

我正在将前端网页迁移到rails环境。我使用Material Design Lite库来设置表单字段的样式。到目前为止我已经定义了两条路线：/ home和/ home / new。 / home页面有一个链接指向/ home / new。

使用链接转到/ home / new时，表单字段中的浮动标签不会被渲染。但是当我通过在地址栏中输入来直接转到/ home / new时，所有样式都会正确呈现。

如何解决此问题？

家\ index.html.erb

 <!DOCTYPE html>
<html lang="eng">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SMS scheduling site</title>
    <%= stylesheet_link_tag "home.style" %>
  </head>

  <body>
    <h1>Saved Campaigns</h1>


    <p> <%= link_to 'Create New Campaign', "/home/new" %></p>



  </body>
</html>

家/ new.html.erb

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SMS scheduling site</title>

  <%= stylesheet_link_tag "mdDateTimePicker" %>
  <%= stylesheet_link_tag "style" %>



</head>

<body>
<div class="container-div">
  <!-- Colored FAB button with ripple -->
  <button id="fab" class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
    <i class="material-icons">add</i>
  </button>

  <div class="demo-card-wide mdl-card mdl-shadow--2dp">
    <div class="mdl-card__title" id="text-div">
      <h2 id="title-text" class="mdl-card__title-text">CAMPAIGN</h2>
      <br>
      <br>
      <span id="success">Success!</span>
    </div>
    <div class="mdl-card__supporting-text">
      <form action="#">

        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
          <input class="mdl-textfield__input" type="text" id="campaign-name">
          <label class="mdl-textfield__label" for="phone-number-receiver">Campaign Name</label>
        </div>

        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
          <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="phone-number-receiver">
          <label class="mdl-textfield__label" for="phone-number-receiver">Phone Number for recipient</label>
          <span class="mdl-textfield__error">Input is not a number!</span>
        </div>

        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
          <input class="mdl-textfield__input" type="text" id="start-date">
          <label class="mdl-textfield__label" for="start-date" id="start-date-label">Enter start date</label>
        </div>


        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
          <input class="mdl-textfield__input" type="text"  id="end-date">
          <label class="mdl-textfield__label" for="end-date" id="end-date-label">Enter end date</label>
        </div>

        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
          <input class="mdl-textfield__input" type="text"  id="start-time">
          <label class="mdl-textfield__label" for="end-date" id="start-time-label">Enter time</label>
        </div>

        <div class="mdl-textfield mdl-js-textfield less-margin">
          <textarea class="mdl-textfield__input" type="text" id="sms-msg" rows="8" columns="40"></textarea>
          <label class="mdl-textfield__label" for="sms-msg">Text lines...</label>

        </div>
        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
          <input class="mdl-textfield__input" type="text"  id="break-msg" value="1">
          <label class="mdl-textfield__label" for="break-msg">Number of Pages</label>
        </div>
      </form>
    </div>
  </div>
</div>



<%= javascript_include_tag "mdDateTimePicker" %>
<%= javascript_include_tag "app" %>
</body>

</html>

的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

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>

的application.js

//= require turbolinks
//= require_tree
//= require jquery
//= require jquery-ui
//= require moment
//= require material
//= require draggabilly.pkgd

application.css

/*
*= require_tree .
 *= require_self
 *= require jquery-ui
 *= require material
 */

Answer 1

您的new.html.erb和home.html.erb是views个文件，在呈现时，“适合”布局application.html.erb。 yield方法将替换为文件内容。

也就是说，您必须从观看中删除<html><meta>...个标记。

您的文件必须是这样的：

<强> index.html.erb

<h1>Saved Campaigns</h1>
<p> <%= link_to 'Create New Campaign', "/home/new" %></p>

<强> new.html.erb

<div class="container-div">
   <!-- ... -->
</div>

您必须将所有脚本放入application.js清单中，并将所有样式放入application.css文件中，包括内页。

一些注意事项：

在application.css中，*= require_tree .指令意味着它会加载将每个css文件放入该文件夹（app / assets / stylesheets）。这意味着您不需要加载它们是单独的（style.css，mdDateTimePicker.css ...）。你可能会想要将此指令移到最后一行（首先，加载供应商脚本，而不是你的。）
在application.js中，您应该在结尾添加一个点 require_tree，如下：//= require_tree .。而且，移动它到最后一行（首先是供应商，然后是你的脚本）。这个指令将所有文件加载到该目录（app / assets / javascripts）： mdDateTimePicker.js，app.js ...

您可以阅读有关sprockets语法的更多信息（处理rails资产管道的gem）here。

这是尝试帮助您掌握基础知识的尝试。用你提供的信息不能知道更多（没有错误信息）。您可以尝试使用控制台，网络选项卡调试代码，检查样式和脚本是否已加载，检查其顺序是否正确。另外，请检查生成的源代码（实际上有重复的body，html标记...）

如果仍然有问题，可以将整个代码发布到存储库（github）中，我可以尝试更好地检查它。

修改

我检查了您的回购代码，并且由于turbolinks而发生了这种情况（请查看docs）。基本上turbolinks通过创建一些“动态”ajax请求来防止刷新页面。但有时它会破坏您的代码，主要是在不处理turbolinks事件的库中。您可能会尝试找到一些解决方法，或者，为了使其工作，您可以通过执行以下操作从项目中删除turbolink：

1）在application.html.erb中，替换

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

使用：

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

2）从gem 'turbolinks', '~> 5'删除Gemfile。

3）从//= require turbolinks
中删除application.js
现在没关系！

Ruby On Rails - 样式无法正确呈现

1 个答案: