10

私はこのファイルを持っています： 

app/views/listings/list.html.erb

私のレールプロジェクトで。ファイルの内容は次のとおりです。

<h1>This file is:"list.html.erb"</h1>  

<!DOCTYPE html>  
<html>  
  <head>  
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
    <style type="text/css">  
      html { height: 100% }  
      body { height: 100%; margin: 0; padding: 0 }  
      #map_canvas { height: 100% }  
    </style>  
    <script type="text/javascript"  
      src="http://maps.googleapis.com/maps/api/js?key=key&sensor=false">  
    </script>  

    <%=javascript_include_tag 'application'%>  
  </head>  
  <body onload="initialize()">  
    <div id="map_canvas" style="width:80%; height:80%"</div>    
    <input type="button" onclick="getlistings();" value="Add Markers">   
    <input type="button" onclick="clearMarkers();" value="Remove Markers">   
  </body>  
</html>

スタイルシートを適用したいと思います。スタイルシートはどこに配置すればよいですか? このファイルにコードを配置しようとしました：

app/assets/stylesheets/listings.css.scss

しかし、スタイルは html ファイルに適用されませんでした。また、スタイル シートを含めるには、html ビュー ファイルを変更する必要がありますか?

これは、「app/assets/stylesheets/listings.css.scss」にあるスタイル シートです。

// Place all the styles related to the Listings controller here.  
// They will automatically be included in application.css.  
// You can use Sass (SCSS) here: http://sass-lang.com/  
.listings  
{  
  table tr td  
  {  
    padding: 5px;  
    vertical-align: top;  
  }  


dt  
{  
  color: #232;  
  font-weight: bold;  
  font-size: larger;  
}  

dd  
{  
  margin: 0;  
}  
}  
#map_canvas  
{  
  width: 80%;  
  height: 80%;  
}

誰かが私に手を貸してくれるかどうか疑問に思っていますか？

ありがとう
編集
application.html.erb ファイルは問題ありません。application.css も問題ありません。以下に投稿された回答を読んだ後、list.html.erb ファイルを変更しました。新しい list.html.erb ファイルは次のとおりです。

<h1>Filename = list.html.erb</h1>  

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
<style type="text/css">  
  html { height: 100% }  
  body { height: 100%; margin: 0; padding: 0 }  
  #map_canvas { height: 100% }   
</style>  
<script type="text/javascript"
  src="http://maps.googleapis.com/maps/api/js?key=AIz&sensor=false">  
</script>  
<%= stylesheet_link_tag 'application' %>  
<%=javascript_include_tag 'application'%>

<%= stylesheet_link_tag 'リスト' %>




問題は今だけ、取りたい

<style type="text/css">  
  html { height: 100% }  
  body { height: 100%; margin: 0; padding: 0 }  
  #map_canvas { height: 100% }  
</style>

この部分を list.html.erb から取り出し、list.css.scss ファイルに入れます。しかし、これを行うと、map_canvas がページから消えてしまい、表示されません。

4

3 に答える 3

14

スタイルシートを配置する場所は問題ありません。app/views/layouts/application.html.erbアプリケーション レイアウト ( ) のヘッダーにスタイルシートが含まれていることを確認する必要があります。

stylesheet_link_tag 'application'

次に、それがアプリケーション マニフェストに含まれていることを確認する必要があります。app/assets/stylesheets/application.css

上部に、次のようなブロックが表示されます。

/* ...
*= require_self
*= require_tree .
*/

そうでない場合*= require_tree .は、スタイルシートの scss ファイルを直接自動ロードしません。詳細については、レール ガイドを参照してください。

アプリケーションのレイアウトとマニフェストが正しくても問題が解決しない場合は、それらのファイルのテキストを質問に追加してください。確認します。

更新: また、レイアウトを正しく理解していないようです。

ビューがレンダリングされるとき、最終的な出力は次のようになります。

<!DOCTYPE HTML>
<html>
  <head>
    ...header stuff goes here...
  </head>
  <body>
    ... body stuff goes here...
  </body>
</html>

ヘッダーなどは常に繰り返されるほとんど標準的なものであり、ページの主要部分のコンテンツのみがページごとに異なります。このようなことを何度も繰り返す必要がないように、Rails はレイアウトを使用します。

レイアウト ファイルapp/views/layouts/application.html.erbは次のようになります (少なくとも)。

<!DOCTYPE html>
<html>
  <head>
    <title>The name of your site</title>
    <%= stylesheet_link_tag 'application' %>
    <%= javascript_include_tag 'application' %> 
    <%= csrf_meta_tags %>
  <head>
  <body>
    <%= yield %>
  </body>
</html>

特定のビューをロードすると、 yieldコマンドがレイアウト内にあるビューのコンテンツがレールによって埋められます。

ビューの名前が間違っていることに注意してください。リストを表示しているapp/views/listings/show.html.erb場合は 、すべてのリストのインデックスを表示している場合は ですapp/views/listings/index.html.erb。

次に、そのファイルに次のものが必要です。

<h1>This file is:"index.html.erb"</h1>

レイアウトとレンダリングの詳細については、Rails ガイドを参照してください。

ただし、システムで何が起こっているのかわからないまま、レールに飛び込もうとしているようです。Rails へようこそ。これは本当に素晴らしいことだと思いますが、優れたチュートリアルから始めることは非常に有益です。入門ガイドを試すことができます。また、Michael Hartl の著書「Rails 3 Tutorial」もお勧めします。それは素晴らしいリソースです。

于 2012-04-20T17:11:41.450 に答える
0

に stylesheet_link_tag が必要です<head>:

<%= stylesheet_link_tag 'application' %>
<%= javascript_include_tag 'application' %>

application.css マニフェストがない場合は、代わりにスタイルシートに直接リンクできます。

<%= stylesheet_link_tag 'listings' %>
于 2012-04-20T17:19:02.697 に答える