Rails jquery移动路由/渲染问题答案

【问题标题】：Rails jquery mobile Routing/Rendering IssueRails jquery移动路由/渲染问题
【发布时间】：2011-11-08 18:28:18
【问题描述】：

我正在学习一个教程 http://fuelyourcoding.com/getting-started-with-jquery-mobile-rails-3/ 将一个简单的支架式 Rails 3 应用程序中的视图转换为一个 jquery 移动前端。

创建新记录后，我被传递到显示视图并实际看到显示视图的结果，因为显示了记录的两个新创建的字段，但是，浏览器中的 URL 是 http://localhost:3000/currencies .而当我查看源码时，源码实际上是索引视图而不是浏览器中呈现的显示视图，这很奇怪。任何想法为什么会发生这种情况？

宝石文件：

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'

路线：

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

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

  root :to => 'currencies#index'

控制器：

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>

【问题讨论】：

标签： ruby-on-rails jquery-mobile

【解决方案1】：

jQuery Mobile 通过 AJAX 加载页面，将它们添加到 DOM，然后使用所有 jQuery Mobile 样式增强它们。由于这种通过 AJAX 加载页面的方法，页面的来源不会随着用户浏览网站而改变。

要查看当前页面的源代码，您需要刷新网页。

我建议阅读 AJAX 导航的 jQuery Mobile 文档：http://jquerymobile.com/demos/1.0rc2/docs/pages/page-navmodel.html

【讨论】：

感谢 Jasper 的洞察力。我遇到的问题与forum.jquery.com/topic/… 此处解决的问题相同。
有没有人想出一个解决方法？当然，我们不能是 Rails 3/JQM 应用程序中唯一面临此问题的人。

【解决方案2】：

将此添加到您的布局中。它强制浏览器缓存更新 URL。

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

【讨论】：