Rails jquery mobile Routing/Rendering Issue

问题

I'm following a tutorial http://fuelyourcoding.com/getting-started-with-jquery-mobile-rails-3/ transforming the views in a straightforward scaffolded Rails 3 application into a jquery mobile front end.

After I create a new record I'm passed to the show view and actually see the results of the show view as in the two newly created fields of the record are shown, however, the URL is http://localhost:3000/currencies in the browser. And when I view the source, the source is actually the index view not the show view that is rendered in the browser, which is rather bizarre. Any ideas why this is happening?

Gemfile:

source 'http://rubygems.org'

gem 'rails', '3.0.10'

# Bundle edge Rails instead:
# gem 'rails', :git => 'git://github.com/rails/rails.git'

gem 'sqlite3'
gem 'jquery-rails'

Routes:

Mycurrency::Application.routes.draw do
  resources :currencies

  #match ':name' => 'Currencies#show', :as => 'currency_name'

  root :to => 'currencies#index'

Controller:

class CurrenciesController < ApplicationController
  # GET /currencies
  # GET /currencies.xml
  def index
    @currencies = Currency.all

    respond_to do |format|
      format.html # index.html.erb
      format.xml  { render :xml => @currencies }
    end
  end

  # GET /currencies/1
  # GET /currencies/1.xml
  def show
   # @currency = Currency.find(params[:id])

    if params[:name]
      if Currency.where(:name => params[:name]).first != nil
        @currency = Currency.where(:name => params[:name]).first
      else
        redirect_to root_path
      end    
    else
      @currency = Currency.find(params[:id])
    end

   # respond_to do |format|
    #  format.html # show.html.erb
     # format.xml  { render :xml => @currency }
  #  end
  end

  # GET /currencies/new
  # GET /currencies/new.xml
  def new
    @currency = Currency.new

    respond_to do |format|
      format.html # new.html.erb
      format.xml  { render :xml => @currency }
    end
  end

  # GET /currencies/1/edit
  def edit
    @currency = Currency.find(params[:id])
  end

  # POST /currencies
  # POST /currencies.xml
  def create
    @currency = Currency.new(params[:currency])

    respond_to do |format|
      if @currency.save
        format.html { redirect_to(@currency, :notice => 'Currency was successfully created.') }
        format.xml  { render :xml => @currency, :status => :created, :location => @currency }
      else
        format.html { render :action => "new" }
        format.xml  { render :xml => @currency.errors, :status => :unprocessable_entity }
      end
    end
  end

  # PUT /currencies/1
  # PUT /currencies/1.xml
  def update
    @currency = Currency.find(params[:id])

    respond_to do |format|
      if @currency.update_attributes(params[:currency])
        format.html { redirect_to(@currency, :notice => 'Currency was successfully updated.') }
        format.xml  { head :ok }
      else
        format.html { render :action => "edit" }
        format.xml  { render :xml => @currency.errors, :status => :unprocessable_entity }
      end
    end
  end

  # DELETE /currencies/1
  # DELETE /currencies/1.xml
  def destroy
    @currency = Currency.find(params[:id])
    @currency.destroy

    respond_to do |format|
      format.html { redirect_to(currencies_url) }
      format.xml  { head :ok }
    end
  end
end

application.html.erb:

<!DOCTYPE html>
<html>
<head>
  <title>Mycurrency</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" />
  <%= javascript_include_tag :defaults %>
<script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
  <%= csrf_meta_tag %>
</head>
<body>
<div data-role="page">
    <%= yield %>
</div>

</body>
</html>

回答1:

jQuery Mobile loads pages via AJAX, adds them to the DOM, and then enhances them with all the jQuery Mobile styling. Because of this method of loading pages via AJAX, the source for the page does not change as a user navigates around the site.

To view the source code for the current page you need to refresh the webpage.

I recommend reading the jQuery Mobile Documentation for AJAX Navigation: http://jquerymobile.com/demos/1.0rc2/docs/pages/page-navmodel.html

回答2:

Add this to your layout. It forces the browser cache to update the URL.

<div data-role="page" id="home" data-url="<%= request.path %>">

来源：https://stackoverflow.com/questions/8055339/rails-jquery-mobile-routing-rendering-issue

标签

ruby-on-rails

jquery-mobile