frankie-loves-jesus/1 - Problem.md

## 1 - Problem.md

      
    Raw
  

              1 - Problem.md
            
          
    Rails static page made up of multiple jQuery Mobile pages

How do I do a Rails static page made up of multiple jQuery Mobile pages when this static page is already inside a jQuery Mobile page?
app/views/layouts/application.html.erb
<!doctype html>
<html>
  <head>
    <title>My App</title>
    <%= stylesheet_link_tag "application" %>
    <%= yield :head %>
  </head>
  <body>
    <div data-role="page">
      <%= yield %>
    </div>
    <%= javascript_include_tag "application" %>
  </body>
</html>
Current app/views/about/about.html.erb
<div data-role="content">
  <p>Lorem ipsum dolor</p>
</div>
Desired app/views/about/about.html.erb
<div id="about1" data-role="page">
  <div data-role="content">
    <p>Lorem ipsum dolor</p>
  </div>
</div>
<div id="about2" data-role="page">
  <div data-role="content">
    <p>Sit amet</p>
  </div>
</div>
<div id="about3" data-role="page">
  <div data-role="content">
    <p>Consectetur adipisicing elit</p>
  </div>
</div>
app/controllers/about_controller.rb
class AboutController < ApplicationController
  def about
  end
end
config/routes.rb
get '/about', to: 'about#about'

Solution 1

Disable layout and repeat layouts/application.html.erb inside about/about.html.erb.
Downside: Not very DRY

app/controllers/about_controller.rb
class AboutController < ApplicationController
  layout false
  
  def about
  end
end
app/views/about/about.html.erb
<!doctype html>
<html>
  <head>
    <title>My App</title>
    <%= stylesheet_link_tag "application" %>
    <%= yield :head %>
  </head>
  <body>
    <div id="about1" data-role="page">
      <div data-role="content">
        <p>Lorem ipsum dolor</p>
      </div>
    </div>
    <div id="about2" data-role="page">
      <div data-role="content">
        <p>Sit amet</p>
      </div>
    </div>
    <div id="about3" data-role="page">
      <div data-role="content">
        <p>Consectetur adipisicing elit</p>
      </div>
    </div>
    <%= javascript_include_tag "application" %>
  </body>
</html>

Solution 2

Add a request.path == about_path check inside layouts/application.html.erb which, if true, will include the other pages as partials.
Downside: A call will have to be made on every request - not nice as this about page will rarely be visited

app/views/layouts/application.html.erb
<!doctype html>
<html>
  <head>
    <title>My App</title>
    <%= stylesheet_link_tag "application" %>
    <%= yield :head %>
  </head>
  <body>
    <div data-role="page">
      <%= yield %>
    </div>
    <% if request.path == about_path %>
      <%= render partial: "about/about2" %>
      <%= render partial: "about/about3" %>
    <% end %>
    <%= javascript_include_tag "application" %>
  </body>
</html>
app/views/about/about.html.erb
<div data-role="content">
  <p>Lorem ipsum dolor</p>
</div>
app/views/about/_about2.html.erb
<div id="about2" data-role="page">
  <div data-role="content">
    <p>Sit amet</p>
  </div>
</div>
app/views/about/_about3.html.erb
<div id="about3" data-role="page">
  <div data-role="content">
    <p>Consectetur adipisicing elit</p>
  </div>
</div>