Rails jquery移动路由/渲染问题
Posted
技术标签:
【中文标题】Rails jquery移动路由/渲染问题【英文标题】：Rails jquery mobile Routing/Rendering Issue 【发布时间】：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>
【问题讨论】：
【参考方案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 %>">
【讨论】：
以上是关于Rails jquery移动路由/渲染问题的主要内容，如果未能解决你的问题，请参考以下文章
通过渲染 Rails 部分创建 jquery html 对象
Jquery 表单提交无法使用 AJAX 和 Rails 莫名其妙地重新渲染 index.html.erb