ASCIIcasts - Full Episode Feed

AJAX的历史记录状态

Sat, 08 Jan 2011 20:11:08 +0000

在第240集 [ 观看，阅读 ]我们向你展示了如何使用AJAX来添加排序，分页和搜索到产品表。这样使用AJAX的问题之一是，当我们进行排序或筛选表格的时候，该网页的网址不变。这意味着我们不能使用返回按钮撤销我们对表格的修改，我们也不能把排序或筛选后的页面存为书签，以便我们回来后得到同样的结果。

这是把AJAX功能添加到一个站点时一个常见的问题，如果我们能找到一个解决办法这将会很有用。我们会在这集中告诉你怎么做。

介绍history.pushState方法

我们我们曾经在第175 [ 观看，阅读 ]集中涉及过这个话题，在那一集中，我们通过改变URL在一个启用AJAX的网站加入书签和历史记录的功能。在那集中，我们分页后就在URL后加入了一个锚点，比如说，第3页，网址是http://localhost:3000/#page=3 。这使我们能够书签页，使后退按钮正常工作。这种方法效果很好，但很快就变得更复杂的情况复杂，比如像现在需要在排序和搜索的同时进行分页。

我们将在这里使用的技术也被应用在GitHub的文件浏览器上。当我们在浏览器中点击了一个GitHub的一个文件夹的时候，这个页面就通过AJAX刷新了，并且不仅仅是锚点整个URL也被JavaScript更新了。这是一个更优雅的解决方案，这意味着我们可以刷新页面或存为书签。另外，该页面被添加到浏览器的历史中，这样后退按钮就像我们期待的那样工作了。

GitHub在博客上讲过这个方案，这个blog后很值得一读，看看这是如何实现的。要看到它工作你需要最新版的Safari，Chrome或Firefox，但它是一个绝对值得使用的技术。是history对象的pushState和replaceState方法和popstate事件让这个”神奇”工作的。在GitHub的博客上有些有用的链接，从那你可以得到更细节的关于这个函数使用的方法的演示。

让我们看看把整个功能加到我们简单的购物应用程序是多么的简单，以便它能在我们排序，搜索和分页产品表的时候起作用。我们添加到原来的应用的JavaScript程序是这样的：

/public/javascripts/application.js

$(function () {
$('#products th a, #products .pagination a').live('click',
  function () {
    $.getScript(this.href);
    return false;
  }
);

$('#products_search input').keyup(function () {
  $.get($('#products_search').attr('action'), $('#products_search').serialize(), null, 'script');
  return false;
});
})

如果上面的代码中包含你觉得不熟悉的东西，那么它值得去240集查看的更多细节。我们使用jQuery在这里，但因为用pushState和replaceState，这种技术也可以和Prototype使用。

代码的第一部分用于处理排序和分页的AJAX功能。我们将添加一个调用history.pushState的代码，这样当一个分页或排序的链接被点击后，URL就被添加到历史记录里了。

有一些有用的关于pushState文档在Mozilla的开发者网上，表明它有三个参数。第一个参数是状态对象，它可以将任何对象，他会当popState事件被触发的时候返回回来。第二个参数是标题，而第三个是URL。我们知道这些后，就可以添加pushState的调用了。

/public/javascripts/application.js

$('#products th a, #products .pagination a').live('click', 
function () {
  $.getScript(this.href);
  history.pushState(null, "", this.href);
  return false;
});

我们并不需要存储任何状态，所以我们在这里传递null作为第一个参数。同样，我们并不需要一个标题，所以我们传递一个空字符串到第二个参数。对于URL我们传递了当前点击的链接this.href。

如果我们现在刷新页面，然后点击AJAX排序或分页链接的后，那个表格会在没有重新加载页面的情况下更新，但现在每次我们点击一个链接的时候，当前在地址栏上的URL会变成我们传入pushState方法的URL，同时这个URL会被添加到浏览器的历史记录中。

所以，现在我们可以把排序和分页后的表格存为书签，当我们回来，或重新载入这个页面，即使页面被通过AJAX动态更新，分页和排序是可以回复的。但是后退按钮还不会像我们期待的那样工作，因为我们还没有监听popstate事件。我们可以通过在popstate事件触发后触发一个方法来解决这个问题

/public/javascripts/application.js

$(function () {
// Other functions omitted.
$(window).bind("popstate", function () {
  $.getScript(location.href);
});
})

在popstate事件触发时，URL已经改回以历史记录中的前一个，所以我们可以通过调用$.getScript方法并传入URL来更新产品表格。

如果我们现在刷新页面并分页和排序几次，我们会发现回退按钮已经工做了，我们可以在我们所做的更改中导航回来。

搜索

下面我们要看一下搜索功能。如果我们在我们现在的应用中对产品搜索时，它会过滤的结果，但是URL不会改变，所以如果在我们搜索后把当前页存为书签或刷新后，我们将失去了这个搜索页面。

用AJAX搜索的JavaScript是这样的：

/public/javascripts/application.js

$(function () {
// Other functions omitted.
$('#products_search input').keyup(function () {
  $.get($('#products_search').attr('action'), $('#products_search').serialize(), null, 'script');
  return false;
});
})

我们将在这里用和我们更改排序部分代码同样的方式使用pushState。

/public/javascripts/application.js

$(function () {
// Other functions omitted.
$('#products_search input').keyup(function () {
  var action = $('#products_search').attr('action');
  var formData = $('#products_search').serialize();
  $.get(action, formData, null, 'script');
  history.pushState(null, "", action + "?" + formData);    return false;
}); 
})

pushState记录的URL是把一个组合形式搜索表单的action和序列化后表单数据用问号连接起来后的一个有效的网址。

‪当我们刷新页面，就看到每当我们在搜索框里键入时URL都会改变。‬‪然而我们按返回键，发现历史页面是我们在搜索框里每次输入的字母，这样是不不理想的。‬‪这是因为我们是在每一个键被按下的时候调用的pushState。‬‪幸运的是我们能够很简单的做到这一点，通过改变上面代码中的pushState为replaceState 。‬‪这样我们每次替换当前的状态而不是在方法被调用时假如另一个状态。‬

/public/javascripts/application.js

$(function () {
// Other functions omitted.
$('#products_search input').keyup(function () {
  var action = $('#products_search').attr('action');
  var formData = $('#products_search').serialize();
  $.get(action, formData, null, 'script');
  history.replaceState(null, "", action + "?" + formData);    return false;
}); 
}）

‪如果我们打开一个新的窗口做一个搜索，我们将看到URL的变化，但这种改变不会添加到浏览器的历史记录中去。‬

‪这是功能不像我们想的那么理想，我们在用户开始搜索的时候使用pushState，随后调用replaceState，以便搜索项被添加到历史记录中。‬‪这个超出了一点这一集的范围，因此我们将不会在这里涉及。‬

‪给每个状态添加标题‬

‪如果我们用几个不同的方式排序产品，然后单击并按住后退按钮去查看浏览器的历史，它只会显示每一次更改的URL，这样当我们要会退的时候就很难选择了。‬‪如果一个标题而不是URL显示在界面上就会让历史记录的功能更有用。‬‪我们通过每次调用pushState的时候把网页的标题设置为第二个参数来实现。‬

‪我们如何设置有用网页的标题？‬‪我们将要做的是设置页面标题，然后在pushState中使用这个标题。‬‪我们可以利用当一个AJAX请求完成后发回更新用的index.js.erb文件设置设置标题。‬

/app/views/products/index.js.erb

$('#products').html('<%= escape_javascript(render("products")) %>');
document.title = "<%= escape_javascript("#{params[:search].to_s.titleize} Products by #{(params[:sort] || 'name').titleize} - Page #{(params[:page] || 1)}") %>"

‪我们将设置包含搜索和排序条件为当前页面的标题后，所有相关的信息就可以看得见了。‬‪然后，我们可以修改pushState和replaceState的调用，让它们更新页面的标题。‬

/public/javascripts/application.js

$(function () {
$('#products th a, #products .pagination a').live('click', function () {
  $.getScript(this.href);
  history.pushState(null, document.title, this.href);
  return false;
});

$('#products_search input').keyup(function () {
  var action = $('#products_search').attr('action');
  var formData = $('#products_search').serialize();
  $.get(action, formData, null, 'script');
  history.replaceState(null, document.title, action + "?" + formData);    return false;
});

$(window).bind("popstate", function () {
  $.getScript(location.href);
});
})

‪现在，我们每次搜索或排序的时候网页的标题都会改变，如果我们看浏览器的历史，我们会看到标题的列表而不是URL。‬

‪旧浏览器的处理‬

‪我们应用程序的新功能工作的非常好，但我们一直假设history.pushState方法在用户的浏览器中是可用的，但是好像只有最新版的Safari，Firefox和Chrome支持这个特性。‬‪为了处理所有的浏览器，首先要检查该浏览器是否支持pushState，然后修改我们的应用程序。‬

‪我们会做的是检查是判断history对象和0}history.pushState方法是不是存在，如果不是，我们会关闭所有AJAX的功能，我们的程序使用链接而不是AJAX，这样就可以优雅的降级。‬

/public/javascripts/application.js

if (history && history.pushState) {
$(function () {
  $('#products th a, #products .pagination a').live('click', function () {
    $.getScript(this.href);
    history.pushState(null, document.title, this.href);
    return false;
  });

  $('#products_search input').keyup(function () {
    var action = $('#products_search').attr('action');
    var formData = $('#products_search').serialize();
    $.get(action, formData, null, 'script');
    history.replaceState(null, document.title, action + "?" + formData);      
    return false;
  });

  $(window).bind("popstate", function () {
    $.getScript(location.href);
  });
})
}

‪这就是这集的全部内容。‬‪它没有使用Rails的特定处理方式去处理Rails应用程序中的AJAX。‬‪如果能够改变这样的网址，我们就能像对待传统的HTML链接一样对待AJAX链接。‬

Active Model

Mon, 13 Sep 2010 21:09:02 +0000

在第193篇【视频, 文本】中，介绍了一种不使用实际数据库的ActiveRecord的用法。实际这只是因为需求而进行的hack的做法，因为ActiveRecord没有设计这样用。不过在Rails 3里，这个情况已经改变。在Rails3里ActiveModel是设计来解决不想存储到数据库的数据的需求。

这篇的主题就是介绍ActiveModel的用法。在正式介绍开始前，我们先看看我们将要用来展示的例子。

截图展示一个用rails 脚手架创建的应用，其中Message是一个ActiveRecord的Model。也就是脚手架默认的把Model关联到数据库。我们将要做的是，我们只是把消息通过email发送但是不保持消息本身。

当然，在你要开始使用ActiveModel的时候你应该确认你是不是真的有这样的需求不使用数据库，因为，把数据库存到数据库可以作为一种数据的备份，或者用来进行后台的异步操作（译者晓夜注：比如当前例子的message可以存到数据库后异步调用发送）。对于我们的演示而言，我们就是要演示怎么使用ActiveModel，也没什么好考虑。那么，首先，看一下Message的Model：

/app/models/message.rb

class Message < ActiveRecord::Base
 validates_presence_of :name
 validates_format_of :email, :with => /^[-a-z0-9_+\.]+\@([-a-z0-9]+\.)+[a-z0-9]{2,4}$/i
 validates_length_of :content, :maximum => 500
end

从Message Model的源代码我们可以看到，Message是继承自ActiveRecord::Base，也就是我们要不使用数据库，那么我们就要解除来自ActiveRecord的继承关系。然而，显然当我们去掉对应的ActiveRecord继承，那么对应的输入验证也就会失效。也就是我们将使用ActiveModel来支持这样的输入验证，这点在后文我们会看到。

查看Rails 3的源代码会看到 activerecord 和 activemodel的文件夹。实际上，Rails核心团队把所有和数据库无关的代码放到ActiveModel下。所以，ActiveRecord实际上依赖ActiveModel，而ActiveModel是经过了测试，并且可以独立于ActiveRecord使用的。

查看ActiveModel目录如下：

从代码列表我们可以大概看出来，这个目录下将包括如下功能处理回调，dirty tracking，序列化和验证，等等。比较显然，最后的三个文件是我们需要的。

打开validations的源代码，我们会看到如下的注释。从注释我们会知道使用验证相当容易，只要把加载 Validations模块和提供getter方法给我们要验证的属性。

  # == Active Model Validations
  #   
  # Provides a full validation framework to your objects.
  # 
  # A minimal implementation could be:
  # 
  #   class Person
  #     include ActiveModel::Validations
  # 
  #     attr_accessor :first_name, :last_name
  #
  #     validates_each :first_name, :last_name do |record, attr, value|
  #       record.errors.add attr, 'starts with z.' if value.to_s[0] == ?z
  #     end
  #   end
  #

那么，我们可以根据注释修改我们的Message Model如下：

/app/models/message.rb

class Message
  include ActiveModel::Validations
  
  attr_accessor :name, :email, :content
 
  validates_presence_of :name
  validates_format_of :email, :with => /^[-a-z0-9_+\.]+\@([-a-z0-9]+\.)+[a-z0-9]{2,4}$/i
  validates_length_of :content, :maximum => 500
end

那么，当前我们修改后的代码会有两个问题：1. 当我们创建Message的时候，Message.new方法会因为我们的initializer方法中不能创建接收参数的数据库插入操作而失效。2. 同样的save方法，原本会保存到数据库现在也将失效。

/apps/controllers/messages_controller.rb

class MessagesController < ApplicationController
  def new
    @message = Message.new
  end

  def create
    @message = Message.new(params[:message])
    if @message.save
      # TODO send message here
      flash[:notice] = "Message sent! Thank you for contacting us."
      redirect_to root_url
    else
      render :action => 'new'
    end
  end
end

我们首先修改保存的问题，因为我们并不需要保存message本身，所以save方法只需要进行验证操作就可以。也就是我们只需要用@message.valid? 方法代替@message.save方法就可以了。

/app/controllers/messages_controllers.rb

def create
  @message = Message.new(params[:message])
  if @message.valid?
    # TODO send message here
    flash[:notice] = "Message sent! Thank you for contacting us."
    redirect_to root_url
  else
    render :action => 'new'
  end
end

至于，创建的问题，我们可以创建一个initialize的方法来接收传入Message的哈希参数，在initializer方法中，通过调用send（译者晓夜：调用变量对应的方法）方法给指定的属性赋值。

/app/models/message.rb

class Message
  include ActiveModel::Validations
  
  attr_accessor :name, :email, :content
 
  validates_presence_of :name
  validates_format_of :email, :with => /^[-a-z0-9_+\.]+\@([-a-z0-9]+\.)+[a-z0-9]{2,4}$/i
  validates_length_of :content, :maximum => 500
  
  def initialize(attributes = {})
    attributes.each do |name, value|
      send("#{name}=", value)
    end
  end
end

看起来应该没有什么问题了，可是当我们重新加载页面会看到如下错误：

问题是在于我们没有在Message中定义to_key方法，form_for默认的认为我们model提供这样的方法，那么，我们需要添加这个功能。

实际上，在我们不知道Rails都需要我们的model提供什么功能的时候，我们可以加载ActiveModel::Lint::Tests模块到我们的modle测试中。在Lint::Tests模块中展示出包括to_key在内的Rails定义的model需要提供的方法。至于，如何解决缺少方法的问题，我们可以加载一组ActiveRecord的模块来解决。 Conversion是其中包括to_key方法的模块。我们也需要Naming 方法，这里我们不使用include而是使用extend因为我们需要类方法（译者晓夜：对应于include类实例方法）。

我们引入了Conversion，那么我们需要重新定义persisted?方法，因为我们不需要使用数据库所以，我们呢需要persisted方法返回false。所以，我们的Message Model将会修改如下：

/app/models/message.rb

class Message
  include ActiveModel::Validations
  include ActiveModel::Conversion
  extend ActiveModel::Naming
  
  attr_accessor :name, :email, :content
 
  validates_presence_of :name
  validates_format_of :email, :with => /^[-a-z0-9_+\.]+\@([-a-z0-9]+\.)+[a-z0-9]{2,4}$/i
  validates_length_of :content, :maximum => 500
  
  def initialize(attributes = {})
    attributes.each do |name, value|
      send("#{name}=", value)
    end
  end
  
  def persisted?
    false
  end
end

这时，我们再刷新页面我们会看到已经能够正常显示了，也就是说我们的Message model已经提供了Rails3需要的方法。提交form我们会发现验证的功能也可以正常使用了。

实际上我们只是介绍了ActiveModel中很少的一部分功能。ActiveModel中还有更多值得了解的方法，幸好这部分的代码结构和注释写的很好，在你需要使用的时候，只要参考对应的源代码就可以很好的了解如何使用。

Rails 3 中的高级查询

Mon, 13 Sep 2010 20:41:03 +0000

在这一集我们将接着第202集的视频，展示Rails 3中将要使用的高级查询，第202集Railscast【视频，文本】视频中我们展示了Rails 3中使用的查询。

用类方法代替Scopes

在我们要来展示的应用程序中包括两个模型：Product 和 Category，其中，Product属于Category，并且在product模型中有一个named scope: discontinued, 用来表示已经停产和价钱低于一个给定的值的产品。

/app/models/product.rb

class Product < ActiveRecord::Base
  belongs_to :category
  scope :discontinued, where(:discontinued => true)
  scope :cheaper_than, lambda { |price| where("price < ?", price) }
end

其中，在第二个named scope的描述中我们用到了lambda，如果你使用过named scope特别是有需要大量传入参数或者是scope本身逻辑复杂的情况下，都会考虑要把scope抽出来写到方法里，虽然，我们当前的例子并没有什么复杂的，为了演示我们同样抽成方法如下：

/app/models/product.rb

class Product < ActiveRecord::Base
  belongs_to :category
  scope :discontinued, where(:discontinued => true)
  
  def self.cheaper_than(price)
    where("price < ?", price)
  end
end

如上抽出方法的scope和原来的scope有同样的功能，虽然在Rails 2中同样支持这样的操作，然而，在rails 3中这样的方法抽象会有更完善的功能。假设我们有另外一个scope Cheap表示价钱低于5的产品，我们就可以重用之前为了使用scope而创建的方法，构造如下：

/app/models/products.rb

scope :cheap, cheaper_than(5)

然而，这里有一个潜在的陷阱，就是我们的scope方法的定义要放到其他的类定义方法的后面，也就是说带方法的scope会在普通scope的位置靠后。

在rails 控制台我们可以看到scope对应的SQL如下：

ruby-1.8.7-p249 > Product.cheap.to_sql
 => "SELECT    \"products\".* FROM      \"products\" WHERE    (price < 5)"

直接调用定义的scope会显示符合scope条件的产品。

>Product.cheap
 => [#<Product id: 1, name: "Top", price: 4.99, discontinued: nil, category_id: 3, created_at: "2010-05-24 21:01:59", updated_at: "2010-05-24 21:01:59">, #<Product id: 2, name: "Milk", price: 2.99, discontinued: nil, category_id: 2, created_at: "2010-05-24 21:02:38", updated_at: "2010-05-24 21:02:38">]

关联

在Rails控制台下我们可以展示另外一个通过关联使用scope的技巧。我们之前提到Product和category有belongs_to的关联，所以，也就是说我们可以使用joins来返回SQL的join表的查询

ruby-1.8.7-p249 > Category.joins(:products).to_sql
 => "SELECT     \"categories\".* FROM       \"categories\" INNER JOIN \"products\" ON \"products\".\"category_id\" = \"categories\".\"id\""

下面是关于符合特定scope的查询的写法，比如我们希望查询至少有一个产品的价值是低于5的所有种类。那么我们可以有下面的两种写法，一种是用merge如下：

> Category.joins(:products).merge(Product.cheap)
 => [#<Category id: 3, name: "Games", created_at: "2010-05-24 21:00:57", updated_at: "2010-05-25 18:30:18">, #<Category id: 2, name: "Groceries", created_at: "2010-05-24 21:00:50", updated_at: "2010-05-25 18:30:39">]

同样的我们也可以使用和merge有相同含义的&来表达如下

> Category.joins(:products) & Product.cheap
 => [#<Category id: 3, name: "Games", created_at: "2010-05-24 21:00:57", updated_at: "2010-05-25 18:30:18">, #<Category id: 2, name: "Groceries", created_at: "2010-05-24 21:00:50", updated_at: "2010-05-25 18:30:39">]

使用这样的方法我们可以关联一些不在自己model的检索条件，比如我们希望查询所有产品的价值都小于5的类别如下，并且我们可以使用to_sql方法查看对应的mysql的语句。

> (Category.joins(:products) & Product.cheap).to_sql
 => "SELECT     \"categories\".* FROM       \"categories\" INNER JOIN \"products\" ON \"products\".\"category_id\" = \"categories\".\"id\" WHERE     (price < 5)"

更为强大的是，我们可以在named scope定义中使用是定义好的scope就如同我们刚刚用到的。比如，创建一个包括所有cheap 产品的类别,如下：

/app/models/category.rb

class Category < ActiveRecord::Base
  has_many :products
  scope :with_cheap_products, joins(:products) & Product.cheap
end

这儿named scope会返回和我们之前的查询相同的数据：

> Category.with_cheap_products
 => [#<Category id: 3, name: "Games", created_at: "2010-05-24 21:00:57", updated_at: "2010-05-25 18:30:18">, #<Category id: 2, name: "Groceries", created_at: "2010-05-24 21:00:50", updated_at: "2010-05-25 18:30:39">]

有一个值得注意的问题是关于多表关联查询中的表名问题，这一点可以通过查看上面我们建立的scope的sql看到：实际上在where查询中我们并没有写明特定的表名.

> Category.with_cheap_products.to_sql
 => "SELECT     \"categories\".* FROM       \"categories\" INNER JOIN \"products\" ON \"products\".\"category_id\" = \"categories\".\"id\" WHERE     (price < 5)"

当两个关联的表都有相关的字段的时候，这就会是问题。所以，我们应该在Product 模型从新定义并且指定表名，这样就不怎么出错了。

/app/models/product.rb

def self.cheaper_than(price) 
  where("products.price < ?", price)
end

也就是说，在我们自己写SQL条件的时候，为了防止不同的表之间有重复字段的问题就应该在关联查询中写明表名。当然如果是按照Rails的哈希条件写，比如在scope里我们定义查询，那么就不要我们自己指明属于哪个表，Rails会自动加上。

通过Named Scopes创建记录

我们可以通过named scopes创建新的记录，例如在Product模型上有一个叫discontinued的named scope

> Product.discontinued
 => [#<Product id: 3, name: "Some DVD", price: 13.49, discontinued: true, category_id: 1, created_at: "2010-05-25 19:45:05", updated_at: "2010-05-25 19:45:05">]

因为named scope是用的Hash所以，我们可以通过调用build方法创建discontinued属性为真的记录。

> p = Product.discontinued.build
 => #<Product id: nil, name: nil, price: nil, discontinued: true, category_id: nil, created_at: nil, updated_at: nil>

这种创建的方式类似于通过Rails的关联方式的创建（译者晓夜注：例如has_many的关联）这样默认的情况下就会有一些限定通过外键设置好。我们通过scope创建记录是用过where语句进行的限定。

Arel

最后我们以Arel对的介绍结束本文。Arel是一种简化的检索方式，在Rails 3中使用很简单，你只需要取一个model的arel_table属性。如下：

> t = Product.arel_table

变量t代表product表，我们可以通过如下方式访问字段属性：

>t[:price]
 => <Attribute price>

通过对属性调用方法等于执行条件查询，例如，我们要找到价值为2.99美元的所有商品：

> t[:price].eq(2.99)
 => #<Arel::Predicates::Equality:0x1040dd9f0 @operand1=<Attribute price>, @operand2=2.99>

这将返回一个predicate对象代表着查询条件。还有一些其他条件我们可以用，比如matches代表Like查询。我们也可以通过to_sql来查看这个查询对应的sql语句

> t[:name].matches('%lore').to_sql
 => "\"products\".\"name\" LIKE '%lore'"

同时我们可以使用or方法将两个predicate对象连在一起进行组合查询，比如查询价值2.99美元或者产品名是lore的产品：

t[:price].eq(2.99).or(t[:name].matches('%lore'))

这将生成如下Sql语句，我们可以通过to_sql看到：

> t[:price].eq(2.99).or(t[:name].matches('%lore')).to_sql
 => "(\"products\".\"price\" = 2.99 OR \"products\".\"name\" LIKE '%lore')"

因为predicate对象对应一个查询条件，那么我们就可以把predicate作为一个参数传给ActiveRecord的where方法。例如把上面的predicate传给Product.where，就会返回价值是2.99美元或者名字以lore结尾的记录集。

>   Product.where(t[:price].eq(2.99).or(t[:name].matches('%lore')))
 => [#<Product id: 2, name: "Milk", price: 2.99, discontinued: nil, category_id: 2, created_at: "2010-05-24 21:02:38", updated_at: "2010-05-24 21:02:38">, #<Product id: 4, name: "Knight Lore", price: 2.99, discontinued: nil, category_id: nil, created_at: "2010-05-26 19:36:02", updated_at: "2010-05-26 19:36:02">]

这里我们只是介绍了Arel最基本的知识。实际上，Arel还可以做更多的事。现在也有很多基于Arel的方便的插件，例如MetaWhere，就可以提供如下方式查询：

Product.where(:price.eq => 2.99, :name.matches => '%lore')

如果需要更采用灵活的方式进行更加复杂的查询，你可以再进一步了解Arel和MetaWhere相关的知识

Customzing Devise

Sun, 27 Jun 2010 18:55:48 +0000

在上一篇的介绍Devise【视频，阅读】中，我们已经可以在我们的Rails应用中搭建和使用devise的基本功能了。现在，我们从上一篇介绍留下来的问题开始，来阐述如何定制devise。

在上一篇的介绍里，我们已经可以在rails项目里通过devise很容易的添加注册，登录和退出的功能：

访问限制

接下来，我们将实现限制访问。在我们这个应用中（译者注：我们开发的是一个简单的项目管理系统），就是对于创建，修改和删除项目进行权限控制，只有注册并且登录的用户才能有权操作。

我们通过在中ProjectsController添加一个before_filter，在其中调用devise提供的检查是否授权的方法authenticate_user!。这个方法会检查Project下的所有方法，如果，用户没有登录并且试图调用该方法的时候，就会跳转到登录页面。理论上讲，没有登录的用户也应该可以访问index和show方法，也就是说，我们还应该添加一个:except选项来保证用户可以正常方法上面两个方法：

/app/controllers/projects_controller.rb

class ProjectsController < ApplicationController  
    
  before_filter :authenticate_user!, :except => [:show, :index]  
  
  def index  
    #rest of class

那么现在，我们点击“New Project”链接，因为我们还没有登录，上面的访问限制就会其作用，页面会跳转到登录页面：

如果，我们仅仅是用来实现简单的是否登录的检查，那devise已经可以很好很简单的处理了。然而，如果我们的授权和访问控制很复杂（译者注：多角色，多用户，交叉权限等），这时我们需要额外的授权控制的插件来实现，比如我们在第192【视频，阅读】中介绍的CanCan一起使用，解决实际的业务需求。

定制Devise的页面显示

我们上209集就遗留一个问题，就是devise会自动为我们生成权限维护过程中的view，那么当我们需要页面的风格和我们的风格一致的时候，就需要自己来定制显示了。Devise也考虑到了这一点，提供了如下途径来解决这个问题。因为devise本身是基于Rails引擎的，只要覆盖原来的页面（实际是override原来的方法）就可以实现定制的要求了。同时devise提供了一个方便的generate方法用来生成这些用来重载的页面方法，如下：

$ rails generate devise_views
      create  app/views/devise
      create  app/views/devise/confirmations/new.html.erb
      create  app/views/devise/mailer/confirmation_instructions.html.erb
      create  app/views/devise/mailer/reset_password_instructions.html.erb
      create  app/views/devise/mailer/unlock_instructions.html.erb
      create  app/views/devise/passwords/edit.html.erb
      create  app/views/devise/passwords/new.html.erb
      create  app/views/devise/registrations/edit.html.erb
      create  app/views/devise/registrations/new.html.erb
      create  app/views/devise/sessions/new.html.erb
      create  app/views/devise/shared/_links.erb
      create  app/views/devise/unlocks/new.html.erb

这个命令复制了所有devise中的页面，那么，也就是说我们只要编辑修改对应的页面和我们原来的项目风格一致。如下，是我们登录页面的代码：

/app/views/devise/sessions/new.html.erb

<h2>Sign in</h2>  
  
<%= form_for(resource_name, resource, :url => session_path(resource_name)) do |f| %>  
  <p><%= f.label :email %></p>  
  <p><%= f.text_field :email %></p>  
  
  <p><%= f.label :password %></p>  
  <p><%= f.password_field :password %></p>  
  
  <% if devise_mapping.rememberable? -%>  
    <p><%= f.check_box :remember_me %> <%= f.label :remember_me %></p>  
  <% end -%>  
  
  <p><%= f.submit "Sign in" %></p>  
<% end %>  
  
<%= render :partial => "devise/shared/links" %>

我们会修改如下：

/app/views/devise/sessions/new.html.erb

<% title "Sign In" %>  
  
<%= form_for(resource_name, resource, :url => session_path(resource_name)) do |f| %>  
  <ol class="formList">  
    <li><%= f.label :email %> <%= f.text_field :email %></li>  
    <li><%= f.label :password %> <%= f.password_field :password %></li>  
    <% if devise_mapping.rememberable? -%>  
    <li><%= f.check_box :remember_me %> <%= f.label :remember_me %></li>  
    <% end %>  
    <li><%= f.submit "Sign in" %></li>  
  </ol>  
<% end %>  
<%= render :partial => "devise/shared/links" %>

我们可以从上面的代码看到用在定制自己页面的时候，我们title的方法替换了header，这种修改页面的方法，我们在第30集【观看，阅读】也可以通过如下git gem来查询相关nifty generators。我们也可以看到我们还修改了，页面的布局用ol标签，加上一个formlist类，这样我们的css就其作用，原来简单的devise的界面，就能够变成我们需要的界面了。

其它的页面可以进行同样的处理，使得我们的页面风格保持一致。

定制错误提示信息

Devise处理错误信息的方式是把所有需要的信息都用i18n的方式保存在config/local目录下，这样就很容易修改和翻译。比如，当输入了错误的email和password的时候，会提示“invalid email or password”如果想要修改这个错误提示，只需要修改对应文件下的devise.failure.invalid错误提示：

/config/locales/devise.en.yml

en:  
  errors:  
    messages:  
      not_found: "not found"  
      already_confirmed: "was already confirmed"  
      not_locked: "was not locked"  
  
  devise:  
    failure:  
      unauthenticated: 'You need to sign in or sign up before continuing.'  
      unconfirmed: 'You have to confirm your account before continuing.'  
      locked: 'Your account is locked.'  
      invalid: 'OH NOES! ERROR IN TEH EMAIL!'  
      invalid_token: 'Invalid authentication token.'  
      timeout: 'Your session expired, please sign in again to continue.'  
      inactive: 'Your account was not activated yet.'  
    sessions:  
      signed_in: 'Signed in successfully.'  
      signed_out: 'Signed out successfully.'  
#rest of file omitted.

这时，当我们再登录并且输入错误的email地址时我们就会看到我们修改的错误提示了：

上面的是错误提示信息，那么，如果我们希望修改validation的验证错误提示呢，比如，在注册过程中不符合要求的字段提示信息，如下：

针对validation Devise有一个配置文件，在/config/initializers/devise.rb文件中，这个文件保存了很多和devise相关的配置信息。这些配置选项有很好的文档注释，以便容易找到对应的选项并且做出修改。那么，如果我们想要把口令的最小长度从原来的6位减少到4位，那么，只需要去掉对应的注释，并修改对应的配置选项。值得注意的是，修改完配置文件后，需要重启server才能够加载生效。

/config/initalizers/devise.rb

  # ==> Configuration for :validatable  
  # Range for password length  
  # config.password_length = 6..20

如果，我们的验证信息更复杂，devise的选项根本没有办法满足，那么我们也可以通过去掉devise的validatable模块，并且自己在User model中添加自己的验证信息的方式来添加自己的独特定制验证信息。

/app/models/user.rb

class User < ActiveRecord::Base  
   # Include default devise modules. Others available are:  
   # :token_authenticatable, :lockable, :timeoutable and :activatable  
   # :confirmable,  
   devise :database_authenticatable, :registerable,   
        :recoverable, :rememberable, :trackable, :validatable  
       
   # Setup accessible (or protected) attributes for your model  
   attr_accessible :email, :password, :password_confirmation  
end

我们可以看到在User的描述中devise方法有很多参数（译者注：就是devise的11个功能模块是否使用的配置。）其中，:validatable就是用来实现注册过程的字段验证的。如果，我们希望自己定制这些字段检查，那么我们就需要先去掉这个:validatable的描述，然后，在User中添加自己需要的字段验证，虽然，devise允许这样自己定制。然后，大部分的情况devise提供的字段验证已经可以处理

路由

定制路由，是说例如devise默认注册页面在/users/sign_up但是比如，我们想要改到/register。实际上默认的devise路由是通过router.rb中的devise_for :users提供的。当然，这些路由devise也提供了修改途径：

/config/routes.rb

ProjectManage::Application.routes.draw do |map|  
  devise_for :users  
       
  resources :projects  
  root :to => 'projects#index'  
end

比如上面的需求，我们可以通过添加path_names的参数达到，如下：

/config/routes.rb

ProjectManage::Application.routes.draw do |map|  
  devise_for :users, :path_names => { :sign_up => "register" }  
       
  resources :projects  
  root :to => 'projects#index'  
end

当我们完成上面的修改之后，当我们再试图通过/users/sign_up来注册的时候就会看到没有路由的错误信息，而通过/users/register就可以正常注册。对于devise_for的路由还有很多其他的参数来帮助定制路由，这可以通过参考devise的文档得到。

定制登录信息

当前devise的配置是通过用户email和用户口令登录。那么，很可能有些项目需要用用户名登录，devise也考虑到了这点，通过简单的配置就可以转换成用户名登录。

$ rails generate migration add_username_to_users username:string

首先，要用用户名登录就得先增加一个username的字段

$ rake db:migrate

因为当前我们只有一个用户，所以，我们不用谢migrate去处理之前没有username字段的数据，只要在控制台简单的修改一下就可以：

$ rails c
Loading development environment (Rails 3.0.0.beta2)
ruby-1.8.7-p249 > User.first.update_attribute(:username, "eifion")
 => true

修改完数据库，已经有登录字段了，那么接着，我们要修改对应的配置文件/config/initializers/devise.rb来指明用不username登录。就是修改config.authentication_keys把 :email 变成 :username：

/config/initializers/devise.rb

config.authentication_keys = [ :username ]

这个配置的修改就可以通过username字段来验证登录，当然我们还应该修改/app/views/devise/sessions/new.html.erb页面，以便输入的字段也使用用户名。

/app/views/devise/sessions/new.html.erb

<% title "Sign In" %>  
<%= form_for(resource_name, resource, :url => session_path(resource_name)) do |f| %>  
  <ol class="formList">  
    <li><%= f.label :username %> <%= f.text_field :username %></li>  
    <li><%= f.label :password %> <%= f.password_field :password %></li>  
    <% if devise_mapping.rememberable? -%>  
      <li><%= f.check_box :remember_me %> <%= f.label :remember_me %></li>  
      <% end %>  
    <li><%= f.submit "Sign in" %></li>  
  </ol>  
<% end %>  
<%= render :partial => "devise/shared/links" %>

注册页面的表单也需要进行相关的修改，以便注册时能够添加用户名，当然对于的输入类型验证也应该包括用户名。和登录的表单类似就不展示了。

当完成以上的配置修改之后，重启服务器我们就可以通过用户名登录了：

这就是定制devise的内容了，通过上面的介绍，我们可以看到Devise是个相当完善的Rails权限管理系统，既有很好的默认配置，也支持灵活的定制。

Introducing Devise

Sun, 13 Jun 2010 22:29:39 +0000

在我们之前的文章中我们已经介绍了一些登录和验证授权的解决方案，现在我们来介绍另外一个。最近，在ruby社区Devise越来越广泛的被采用来解决维护权限和验证。Devise源于Warden，而warden是一个基于Rack的验证权限gem，不过，使用devise实际并不需要任何关于warden的知识。

如果你之前有一些其他类似的维护验证权限功能的gem的使用经验的话，你会发现Devise的和他们的不同之处在于，提供了从页面到model的实现。相比而言，例如Authlogic就只实现了丢与model层的实现，这时你就要自己去处理view层实现。而Devise是基于Rails 引擎开发的所以就可以同时提供controllers和view的实现。从功能角度来看，Devise提供了11个方面的在维护和验证权限过程的功能模块，这些模块都是可配置的。例如，其中Rememberable模块是使用cookie保存用户的登录信息，Recoverable是用来处理用户重置口令的。可定制的模块使用可以很容易的根据自己的业务需求配置对应的相应功能模块。

给项目添加权限验证系统

那么，我们就通过一个实例来看看Devise是在项目中是如何使用的。下面的截图是一个用Rails3.0写的简单的项目管理应用。 Devise将会添加一个User model和提供权限控制功能。

Devise可以很好的支持Rails 3 和Rails 2.3 在低的版本就不能支持了。而且，针对不同的Rails版本，我们需要选择不同的devise版本。Rails 3需要安装 Devise 1.1.rc0，而rails2.3需要1.0.6。

那么，我们的项目是Rails3的就要应该把devise 的gem版本信息注明到gemfile里，如下：

/Gemfile

gem 'devise', '1.1.rc0'

有了这个声明，我们就可以通过bundle来安装需要的gem和gem需要的依赖包了。

bundle install

接下来一步是通过generate安装devise相关代码。

$ rails generate devise_install
      create  config/initializers/devise.rb
      create  config/locales/devise.en.yml
 
===============================================================================
 
Some setup you must do manually if you haven't yet:
 
  1. Setup default url options for your specific environment. Here is an
     example of development environment:
 
       config.action_mailer.default_url_options = { :host => 'localhost:3000' }
 
     This is a required Rails configuration. In production is must be the
     actual host of your application
 
  2. Ensure you have defined root_url to *something* in your config/routes.rb.
     For example:
 
       root :to => "home#index"
 
===============================================================================

运行上面的命令会产生一些文件，包括config initializer下的初始化devise文件，和config/local下的i18n显示消息输出的文件。下面提示的是两个需要手动执行的操作，一个是为应用配置email host。另外，一个是在route下配置root的路由。演示项目中默认的根路由已经配置了，就不用再配。但devise发邮件用email的主机还需要配置，也很简单因为我们是开发环境，直接拷贝提示就行。

/config/environments/development.rb

config.action_mailer.default_url_options = { :host => 'localhost:3000' }

这个配置的意思似乎把localhost做为接发邮件的主机，如果，项目上线，在生产环境就需要在production中把action_mailer的host配置成域名。

生成devise的User Model

Devise会使用User Model来控制和权限，而且，Devise提供了generator来生产User Model, 当然这个generato只是节省时间，并不是必须运行的，手动生成User model完全可以。

$ rails generate devise User
      invoke  active_record
      create    app/models/user.rb
      invoke    test_unit
      create      test/unit/user_test.rb
      create      test/fixtures/users.yml
      inject  app/models/user.rb
      create  db/migrate/20100412200407_devise_create_users.rb
       route  devise_for :users

运行generator会生成一个model文件，一个migration文件和一个devise_for的路由。我们下面将一个一个来看看这些文件的作用。

下面是generator生成的User Model：

/app/models/user.rb

class User < ActiveRecord::Base  
  # Include default devise modules. Others available are:  
  # :token_authenticatable, :lockable, :timeoutable and :activatable  
  # :confirmable  
  devise :database_authenticatable, :registerable,   
         :recoverable, :rememberable, :trackable, :validatable  
  
  # Setup accessible (or protected) attributes for your model  
  attr_accessible :email, :password, :password_confirmation  
end

我们可以看到User model和普通的ActiveRecord的区别并不大，主要的差别是调用了devise方法，当然这也是配置的关键。Devise方法有很多的参数用来标识是否使用对应的功能模块。比如，我们在前文说过的:rememberable和:recoverable功能模块。所以，正如我们看到的，devise就是用这样简单的方式来配置是否使用相对应的功能模块。就是说，如果我们不想要确认password的功能，我们只是需要把对应的:confirmable从这里删除就可以了。

同时，User类中还有attr_accessible方法，是用来描述可能用到的User表字段。也就是，如果我们需要在Model以为使用这个属性，那么，就要标识清楚是否需要只读还是读写权限。

接下来，我们看看生产的migration文件：

class DeviseCreateUsers < ActiveRecord::Migration  
  def self.up  
    create_table(:users) do |t|  
      t.database_authenticatable :null => false  
      # t.confirmable  
      t.recoverable  
      t.rememberable  
      t.trackable  
      # t.lockable :lock_strategy => :failed_attempts, :unlock_strategy => :both  
  
      t.timestamps  
    end  
  
    add_index :users, :email,                :unique => true  
    # add_index :users, :confirmation_token,   :unique => true  
    add_index :users, :reset_password_token, :unique => true  
    # add_index :users, :unlock_token,         :unique => true  
  end  
  
  def self.down  
    drop_table :users  
  end  
end

数据库的migration文件就很容易理解了，和普通的migration文件完全相同，标识user都会有什么字段。值得一提的是，表的字段和我们刚才的配置也有关系就是如果我们没有配置对应的功能模块，也就应该删除相对应的字段，和对应的索引。那么，修改完我们需要的migration文件就可以执行migration真正生成对应的数据库结构。通过运行下面命令生成：

rake db:migrate

接下来，我们看看generator在router.rb文件中的devise_for都产生了什么路由.我们可以通过rake routes查看：

    new_user_session   GET    /users/sign_in                 {:controller=>"devise/sessions", :action=>"new"}
          user_session POST   /users/sign_in                 {:controller=>"devise/sessions", :action=>"create"}
  destroy_user_session GET    /users/sign_out                {:controller=>"devise/sessions", :action=>"destroy"}
                       POST   /users/password(.:format)      {:controller=>"devise/passwords", :action=>"create"}
         user_password PUT    /users/password(.:format)      {:controller=>"devise/passwords", :action=>"update"}
     new_user_password GET    /users/password/new(.:format)  {:controller=>"devise/passwords", :action=>"new"}
    edit_user_password GET    /users/password/edit(.:format) {:controller=>"devise/passwords", :action=>"edit"}
                       POST   /users(.:format)               {:controller=>"devise/registrations", :action=>"create"}
                       PUT    /users(.:format)               {:controller=>"devise/registrations", :action=>"update"}
     user_registration DELETE /users(.:format)               {:controller=>"devise/registrations", :action=>"destroy"}
 new_user_registration GET    /users/sign_up(.:format)       {:controller=>"devise/registrations", :action=>"new"}
edit_user_registration GET    /users/edit(.:format)          {:controller=>"devise/registrations", :action=>"edit"}

稍微有点乱，当然，我们还是可以看出来，产生了如下路由：登录，登出，重置密码，注册，和修改。如果我们需要，所有这些路由都是可以配置的。那么，有了这些路由我们就可以通过制定的描述，来访问对应的功能模块了。比如，我们应该通过访问/users/sign_up的路径来调用注册模块。

那么如果我们通过这个界面，我们完成注册，就会默认已经登录。这时，我们也可以通过/users/sign_out来登出。当然，如果这时我们再次试图通过访问/users/sign_in来登录，并输入刚才注册的用户名和口令。我们就会发现下面的错误：

这实际是一个Rails 3.0 beta 2的问题，如果，我们看到这个错误，可以通过修改 /config/initializers/cookie_verification_secret.rb中的secret key来修正。其中，secret key是用来验证登录cookies的。

/config/initalizers/cookie_verification_secret.rb

# Be sure to restart your server when you modify this file.  
  
# Your secret key for verifying the integrity of signed cookies.  
# If you change this key, all old signed cookies will become invalid!  
# Make sure the secret is at least 30 characters and all random,   
# no regular words or you'll be exposed to dictionary attacks.  
Rails.application.config.cookie_secret = '3b161f7668f938d1aeb73e1137964f8d5ebaf32b9173c2130ecb73b95b610702b77370640dce7e76700fb228f35f7865ab2a5ccd22d00563504a2ea9c3d8dffe'

我们需要做的就是在这个文件中删除相关描述，并且/config/application.rb文件中删除Rails.application的部分，如下：

/config/application.rb

require File.expand_path('../boot', __FILE__)  
require 'rails/all'  
  
Bundler.require(:default, Rails.env) if defined?(Bundler)  
  
module ProjectManage  
  class Application < Rails::Application  
    config.filter_parameters << :password  
    config.cookie_secret = '3b161f7668f938d1aeb73e1137964f8d5ebaf32b9173c2130ecb73b95b610702b77370640dce7e76700fb228f35f7865ab2a5ccd22d00563504a2ea9c3d8dffe'  
  end  
end

重启后，我们应该可以正常登录。

实际上，到目标我们已经完成了所有的验证权限的功能。接下来，我们可以进行一些改进。通常我们都愿意在页面上方显示用户是否已经登录的状态。如果登录就显示用户的一点信息，如果没有登录就显示登录和注册。

这样的需要很容易实现，我们可以在application的layout中添加对应的输出信息，以便在每个页面都可以看到同样的登录信息。如下：

/app/views/layouts/application.html.erb

<div id="user_nav">  
  <% if user_signed_in? %>  
    Signed in as <%= current_user.email %>. Not you?  
    <%= link_to "Sign out", destroy_user_session_path %>  
  <% else %>  
    <%= link_to "Sign up", new_user_registration_path %> or  
    <%= link_to "Sign in", new_user_session_path %>  
  <% end %>  
</div>

简单解释一下，这段显示登录信息的代码。这段代码主要是通过devise提供的方法实现，其中，判断是否登录是通过 user_signed_in? 如果登录了，就通过current_user来显示当前用户的email，而退出的路径是devise通过 destroy_user_session标识到/users/sign_out。同样，如果没有登录的话，可以通过 new_user_registration_path 和 new_user_session_path 分别表示注册和登录的路径。

那么，当我们把代码写好，刷新页面就可以看到对应的信息了。

正如我们上面操作的，通过使用devise，添加很少的代码就可以拥有注册，登录，退出的功能。当然，devise还有更多的相关功能也相当容易上手使用。比如，重新设置密码的功能模块，也是在User的model里加上confirmable就可以拥有对应的功能。

最后，可能我们会想到一个问题。因为，所有的登录，权限相关的界面也都是devise生成的，那么，如果，我们希望页面风格和我们自己的网站的风格一致，怎么办？实际上，devise也考虑到了这一点，提供了很容易的定制devise的途径，我们将在下一篇中介绍。

语法高亮

Fri, 02 Apr 2010 13:43:25 +0000

有时候需要展示Rails应用程序中的代码片段，为使代码可读性更高，你可以使用语法高亮。基本上每一期我都是这么做的，但是语法高亮是怎么实现的呢？

有几种不同的方法可以向Rails应用程序中加上语法高亮功能。首先你要确定，你是想用Rails在服务器端实现语法高亮，还是想用JavaScript库在浏览器中转换页面实现语法高亮。有许多Javascript库可以用于客户端语法高亮显示，但我们这儿不讨论它们，因为它们不是Rails特有的。我们将要为你展示的是Rails世界中流行的3个语法高亮实用工具。

CodeRay

第一个是CodeRay。它可以用Gem安装，非常简单，也没有额外的依赖组件，并且CodeRay的速度非常快。然而它提供的功能特性有限，支持的语言种类也不多。但如果它提供的正是你的应用程序所需要的，那它会是非常好的解决方案，我们将在这期的后面详细的研究它。

Ultraviolet

第二个选择是Ultraviolet，这也是个Gem组件，不过它还有一些依赖的组件，所以安装的时候有些麻烦。Ultraviolet要比CodeRay慢，不过Ultraviolet拥有更多的功能特性。Ultraviolet可以使用TextMate（Mac下的著名的文本编辑器软件）的语法文件和主题。因此Ultraviolet比CodeRay支持更多种语言，对于如何高亮显示代码片段也更加灵活。

如果你选择Ultraviolet用于语法高亮，就有必要看一看Harsh。Harsh是一个Rails插件，它提供了一个非常好的helper方法，可以用来在视图文件中高亮显示代码，它还提供了一些rake任务来安装主题和管理主题。Ultraviolet的README文件对如何安装Ultraviolet提供的很有用的指导。

Pygments

第三个常用的选择是Pygments。 Pygments和CodeRay、Ultraviolet都不同，因为它是一个Python库。但由于Pygments提供命令行实用工具，所以我们的Rails应用程序可以调用它。 Pygments是一个功能非常全面的库，拥有良好的支持，并被广泛用于很多网站。但它的缺点是，当你试图在Rails应用程序中分析很大的文件时，速度会变得非常慢。所以如果你考虑在程序中使用Pygments时，有必要使用缓存。

有一个非常好的插件highlight可以使Pygments在Rails中应用起来更加简单。这个highlight插件封装了Pygments，你可以在视图中用一个很简单的helper方法来调用它。考虑Pygments速度方面的原因，我们建议使用highlight时，它产生的任何输出都要缓存。为了实现缓存，只要将所有的输出包含在一个cache块中，像这样：

<% cache do %>   
<%= highlight(:ruby, 'class Test; end') -%>   
<% end %>

标记

我们已经大概了解了上面谈到的3种语法高亮工具，现在来比较一下它们在速度上的表现。一个应用程序可能需要渲染许多高亮的代码，所以我们需要考虑是否缓存输出的结果。为了比较这3种工具，我们将使用下面的代码：

 
require 'rubygems'  
require 'benchmark'  
require 'coderay'  
require 'uv'  

path = __FILE__   
content = File.read(__FILE__)   

# run it once to initialize   
CodeRay.scan("print 'hello'",  'ruby').div(:css => :class)   
Uv.parse("print 'test'", 'xhtml', 'ruby', true, 'amy')   

Benchmark.bm(11) do |b|   
b.report 'coderay' do  
  50.times { CodeRay.scan(content, 'ruby').div(:css => :class) }   
end  

b.report('ultraviolet') do  
  50.times { Uv.parse(content, 'xhtml', 'ruby', true, 'amy') }   
end  

b.report('pygments') do  
  50.times { `pygmentize -f html "#{path}"` }   
end  
end

这个基准测试代码分别用3种语法高亮工具库把自身内容解析50遍，Pygments使用的是pygmentize 命令。运行结果如下：

$ ruby benchmark.rb 
               user     system      total        real
coderay      0.310000   0.010000   0.320000 (  0.312954)
ultraviolet  4.860000   0.020000   4.880000 (  4.886621)
pygments     0.010000   0.120000  12.430000 ( 12.643173)

从上面看出每个库的表现差别很大。CodeRay显然是最快的，迭代50次只用了0.3秒左右。Ultraviolet用了CodeRay10倍多的时间，而Pygments还要更慢，完成上面测试用了超过12秒的时间。这三个语法高亮工具库速度差别如此之大，在选择到底用哪一个时，功能特性和性能表现两方面取得平衡很重要。当然，如果你使用缓存，那速度就不再是个问题。

使用CodeRay

本期接下来我们将向你展示如何在Rails应用程序中使用CodeRay。CodeRay是三个语法高亮工具库中安装起来最简单而且速度最快的，因此没有必要担心缓存问题。

为了展示CodeRay，我们将使用一个简单的博客应用程序，你在前期节目中可能见过这个程序了。我们将用CodeRay为这个博客程序加入下面功能：语法高亮显示文章中的代码片段。

当作者编辑文章时，我们希望能在代码标签中加入代码片段，像这样：

<code lang="ruby">   
puts "Hello, world!"  
</code>

当像上面的代码片段出现在文章正文中时，需要通过适当的语法高亮显示出来。

为了实现这点，首先要在/config/environment.rb 文件中加入CodeRay gem组件的引用信息，这是针对Rails 2的情况。如果是Rails 3 则需要修改Gemfile。

/config/environment.rb

   
Rails::Initializer.run do |config|   
config.gem "coderay"  
config.gem "RedCloth"  
end

我们后面将用到Textile，所以这儿要安装RedCloth gem 组件。有个gem组件捆绑了CodeRay和RedCloth，但我们这里打算分开来安装它们。

接下来我们更新ArticleController的视图文件show，用CodeRay解析代码标签中的内容并高亮显示它们。为此，我们需要将显示文章内容的代码传递给一个新的helper方法，这个方法叫coderay，如下：

/app/views/articles/show.html.erb

<% title @article.title %>   
<p class="author">from <%= @article.author %></p>   
<%= coderay(@article.content) %>   
<p>

The helper method will go into our application_helper file:

/app/helpers/application_helper.rb

# Methods added to this helper will be available to all templates in the application.   
module ApplicationHelper     
def coderay(text)   
  text.gsub(/\<code( lang="(.+?)")?\>(.+?)\<\/code\>/m) do  
    CodeRay.scan($3, $2).div(:css => :class)   
  end  
end  
end

这个coderay方法非常简单，它接受一段文本text作为参数，这个text中可能包含需要高亮显示的代码片段，用text调用gsub方法，查找匹配代码标签的内容，并将查找到的内容用代码块的返回值替换。其中的正则表达式就是用来查找以'<code'开头并拥有'lang'属性的代码标签，然后匹配位于代码标签开始（<code lang=）和结束（</code>）之间部分。代码块的内部调用了CodeRay.scan 方法。这个方法接受一段文本和语言作为参数，所以我们传递了$3和$2给它，$3是正则表达式匹配出来的代码标签之间的内容(/\<code( lang="(.+?)")?\>(.+?)\<\/code\>/m)，$2是正则表达式中匹配出来的属性lang的值(/\<code( lang="(.+?)")?\>(.+?)\<\/code\>/m)。接着代码块调用了.div ，将前面的返回值包含在一个div标签中。:css => :class 选项告诉CodeRay采用什么类型的CSS样式。CodeRay有许多不同的选项用来控制输出内容的结构和样式。更多详细信息请查看这个文档。

最后，我们需要创建一张样式表，设置CodeRay每个类的样式。Ryan Bates创建一个类似Railscasts主题的样式表文件，你可以从Github上下载。我们则拷贝一份这个文件，把它放到项目目录/public/stylesheets 中。

/public/stylesheets/coderay.css

.CodeRay {   
background-color: #232323;   
border: 1px solid black;   
font-family: 'Courier New', 'Terminal', monospace;   
color: #E6E0DB;   
padding: 3px 5px;   
overflow: auto;   
font-size: 12px;   
margin: 12px 0;   
}   
.CodeRay pre {   
margin: 0px;   
padding: 0px;   
}   

.CodeRay .an { color:#E7BE69 }                      /* html 属性*/  
.CodeRay .c  { color:#BC9358; font-style: italic; } /* 注释 */  
.CodeRay .ch { color:#509E4F }                      /* 转义字符 */  
.CodeRay .cl { color:#FFF }                         /* 类 */  
.CodeRay .co { color:#FFF }                         /* 常数 */  
.CodeRay .fl { color:#A4C260 }                      /* 浮点数 */  
.CodeRay .fu { color:#FFC56D }                      /* 方法 */  
.CodeRay .gv { color:#D0CFFE }                      /* 全局变量 */  
.CodeRay .i  { color:#A4C260 }                      /* 整型 */  
.CodeRay .il { background:#151515 }                 /* 内联代码 */  
.CodeRay .iv { color:#D0CFFE }                      /* 实例变量 */  
.CodeRay .pp { color:#E7BE69 }                      /* 文档类型 */  
.CodeRay .r  { color:#CB7832 }                      /* 关键字 */  
.CodeRay .rx { color:#A4C260 }                      /* 正则表达式 */  
.CodeRay .s  { color:#A4C260 }                      /* 字符串 */  
.CodeRay .sy { color:#6C9CBD }                      /* 符号 */  
.CodeRay .ta { color:#E7BE69 }                      /* html 标签 */  
.CodeRay .pc { color:#6C9CBD }                      /* 布尔型 */

高亮显示的源代码中每一种标记符号都有相应的CSS类选择器，上面代码中的颜色可以根据你应用程序的需要随意改变。

为了使样式表文件起作用，需要在应用程序layout布局文件的头部将样式表文件包含进来。

/app/views/layouts/application.html.erb

<%= stylesheet_link_tag 'blog', 'coderay' %>

做完这些，我们编辑一篇文章后，查看文章时就会看到高亮显示的部分。

使用Textile

语法高亮通常和简单标记语言联合使用，如Textile和Markdown。要在文章中使用Textile，我们可以在视图文件show 中调用textilize方法，并将coderay方法的返回值作为参数传递给textilize。

/app/views/articles/show.html.erb

<%= textilize(coderay(@article.content)) %>

如果不希望coderay方法的返回值被RedCloth解析，只需要稍微改动coderay方法，将其返回值放入一个notextile元素中，这样就不会被解析了。

/app/helpers/application_helper.rb

def coderay(text)   
text.gsub(/\<code( lang="(.+?)")?\>(.+?)\<\/code\>/m) do  
  content_tag("notextile", CodeRay.scan($3, $2).div(:css => :class))   
end  
end

如果我们重新编辑文章，加入一些标记代码，像这样：

The piano is a musical instrument played by means of a keyboard that produces sound by striking steel strings with felt hammers. The hammers immediately rebound allowing the strings to continue vibrating at their resonant frequency. These vibrations are transmitted through a bridge to a soundboard that amplifies them.

* item
* item 2

<code lang="ruby">
def hello
puts 'Hello, world!'
end
</code>

现在文章中就会有一个Textile生成的无序列表和语法高亮显示的代码片段。

上面就是本期“语法高亮”的内容。CodeRay使Rails应用程序中高亮显示代码片段变得容易，如果你需要语法高亮的功能，值得好好研究一下。

ActionMailer in Rails 3

Fri, 02 Apr 2010 21:53:59 +0000

ActionMailer在Rails3.0里面有很大的变化。ActionMailer在Rails3.0里面使用更好用的Mail gem 替代之前使用的TMail gem。

我们创建一个新的Rails 3 应用程序来演示这个ActionMailer。我们把这个应用程序叫做：mailit。

rails mailit

接下来我们为一个User模型创建脚手架(scaffold)。这个模型有两个属性：name和email，用来演示简单的用户注册页面。

rails g scaffold user name:string email:string

然后我们运行数据库迁移(migrations):

rake db:migrate

刚才生成的脚手架(scaffolding)代码包括一个创建用户的页面。我们希望应用程序在这个表单(form)提交后创建一个新用户并且发送一封确认信。

首先我们需要做的是创建一个新的初始化文件(initializer file)并添加一些配置信息,我们把它命名为setup_mail.rb。这个文件放在/config/initializers目录下。

如果你的机器里面已经安装并配置了sendmail，ActionMailer会使用sendmail发送邮件。我们也可以在initializer中指定SMTP设置。

/config/initializers/setup_mail.rb

ActionMailer::Base.smtp_settings = {
  :address              => "smtp.gmail.com",
  :port                 => 587,
  :domain               => "asciicasts.com",
  :user_name            => "asciicasts",
  :password             => "secret",
  :authentication       => "plain",
  :enable_starttls_auto => true
}

也许你想用在生产环境下(production environment)使用另外的发送方式。但如果我们的应用程序正在开发阶段，这个方式已经足够了。你需要去根据你自己的Gmail帐号信息去修改domain,user_name,和password。

这样我们已经完成了配置信息，我们可以用下面的代码去生成一个新的mailer。

rails g mailer user_mailer

这个命令会帮我们在/app/mailers目录下创建一个新的user_mailer.rb文件。早期版本的Rails会把mailer类文件都放在/app/models文件夹里面，在Rails 3他们被放在自己的文件夹里面(译者注：/app/mailer)。Mailers在Rails 3像控制器(controller)，并且Mailers和控制器共享很多底层代码。

UserMailer类的默认代码看起来像这样(/app/mailers/user_mailer.rb)：

/app/mailers/user_mailer.rb

class UserMailer < ActionMailer::Base
  default :from => "from@example.com"
end

我们现在把default那行代码删掉，在后面我们会解释这行代码的用途。

就像Rails 2应用程序里面一样，我们为每个我们要发送的email类型添加一个方法。在我们的例子里，我们添加一个叫做 registration_confirmation的方法。

/app/mailers/user_mailer.rb

class UserMailer < ActionMailer::Base
  def registration_confirmation(user)
    mail(:to => user.email, :subject => "Registered", :from => "eifion@asciicasts.com")
  end
end

我们给registration_confirmation方法传递一个User对象，然后我们需要做的仅仅是调用mail方法，给mail方法传递:to,:from和:subject之类的参数。

如果我们在类里面有多个共享相关设置的方法，我们可以把这些共享值放在之前我们删除的default方法里面。比方说email总是从同样的地方发送，我们就可以把:from设置放到default里面:

/app/mailers/user_mailer.rb

class UserMailer < ActionMailer::Base
  default :from => "eifion@asciicasts.com"

  def registration_confirmation(user)
    mail(:to => user.email, :subject => "Registered")
  end
end

我们可以把任何准备共享的设定(任何可以在mail方法里面设定的值)抽出来放在default方法里面。

类似controllers，mail需要有相对于的视图(view)文件。我们的注册确认邮件的视图文件放在/app/views/user_mailer文件夹内。我们准备用纯文本的形式发送邮件，因此我们的文件名叫做registration_confirmation.text.erb。这个文件里面的任何内容都将作为email的内容显示。

/app/views/usermailer/registration_confimration.text.erb:

Thank you for registering!

接下来我们需要写些代码，这些代码实现当创建用户的时候发送邮件的功能。有些人喜欢使用Model Observer去实现，但我们准备直接在controller层里面实现。我们这样做的理由是：如果我们使用观察者(observer), 那么我们如果在Rails命令行(console)里面创建User对象的时候，后台也会发送email。我们只想用户在应用程序里面创建时发送email。因此我们就把实现代码放在controller里面。

我们在UsersController的create action里面添加发送email的代码。我们所需要做的仅仅是调用我们刚刚写的registration_confirmation方法，把新创建的user作为参数传递进去，最后调用deliver方法发送email。

/app/controllers/users_controller.rb

def create
  @user = User.new(params[:user])

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

这个跟Rails 2有点不同，在Rails 2里，我们调用deliver_registration_confirmation方法。现在我们的registration_confirmation方法返回一个mail message对象，然后再调用它的deliver方法。这样我们可以在我们需要发送email的时候才调用deliver。

我们现在测试一下：注册一个新的用户，当我们提交表单的时候，系统就会发送一封email.

从上图可以看到我们邮件发送成功。

如果我们想在email里面显示刚注册的用户的姓名该怎么办呢？我们需要把user对象传到view里面。在Rails 3里面我们很容易就可以这样做，因为mailers就像controllers一样，任何实例变量(instance variables)都可以在view里面访问。我们需要做的仅仅是用传递到registration_confirmation方法的user变量创建一个view里可以访问的实体变量。

/app/mailers/user_mailer.rb

def registration_confirmation(user)
  @user = user
  mail(:to => user.email, :subject => "Registered")
end

因为mail方法会返回mail message，mail方法的调用必须写在方法的最后。这样我们得在mail方法前定义实体变量。

现在我们在mailer里面定义了实体变量，我们可以在view里面使用它把用户的姓名添加在email里。

/app/views/user_mailer/registration_confirmation.text.erb

<%= @user.name %>,

Thank you for registering!

当我们再次注册一个新的用户，用户的姓名将会显示在email的内容里:

如果我们想要在email里面提供给新用户编辑他们的个人信息的链接，我们可以这样做:

Edit Profile: <%= edit_user_url(@user) %>

这样是无法工作的。我们必须使用:host提供应用程序域名.

/app/views/user_mailer/registration_confirmation.text.erb

<%= @user.name %>,

Thank you for registering!

Edit Profile: <%= edit_user_url(@user, :host => "localhost:3000") %>

必须这样做的原因是mailers已经完全从当前的请求(request)分离出来。这样设计的原因是：mailer可以不在当前controller的请求内发送email。

我们可以在之前的initializer文件里设定host的值，这样我们就不需要对每封email的每个link都设定host值。

/config/initializers/setup_mail.rb

ActionMailer::Base.smtp_settings = {
  :address              => "smtp.gmail.com",
  :port                 => 587,
  :domain               => "asciicasts.com",
  :user_name            => "asciicasts",
  :password             => "secret",
  :authentication       => "plain",
  :enable_starttls_auto => true
}

ActionMailer::Base.default_url_options[:host] = "localhost:3000"

我们在这里可以用hash指定任何设置(options)，现在我们只需要设定host值。当我们再次注册，我们可以在email里面看到一个带有正确url的链接。

Multipart邮件与附件

在Rails 3里面发送multipart emails也相当方便。我们所需要做的仅仅是创建一个跟text view同名的视图文件(view)。在我们的例子里面这个文件为registration_confirmation.html.erb。在这个文件里面，我们添加一些简单的html代码。

/app/views/user_mailer/registration_confirmation.html.erb

<p><%= @user.name %>,</p>

<p>Thank you for registering!</p>

<p><%= link_to "Edit Profile", edit_user_url(@user, :host => "localhost:3000") %></p>

如果我们在支持html的客户端查看email，我们将会看到email里面有一个链接。两种类型的email内容都会发送，这样如果客户端不支持html，它将会显示纯文本形式的email内容。

添加附件操作相当直接而简单。我们只用调用attachements方法，设置附件名称，并读取一个文件给这个附件。

/app/mailers/user_mailer.rb

def registration_confirmation(user)
  @user = user
  attachments["rails.png"] = File.read("#{Rails.root}/public/images/rails.png")
  mail(:to => "#{user.name} <#{user.email}>", :subject => "Registered")
end

当我们再次注册，rails.png文件就作为一个附件显示在email里面。注意上面的代码，我们把用户的姓名添加到:to里面了。

可以看出使用新的ActionMailer API,我们很容易就创建复杂的emails. 默认的设置基本上够用了，如果你想设置类似编码格式(encoding types)的值，你可以修改覆盖默认设置。

拦截器(Interceptors)

再结束本章之前我们将会介绍一向新技术：在email messages发送前拦截它们。拦截器可以帮我们在开发模式的时候(development mode)改变email的发送方式，这样emails将会只发送到你自己的帐号里而不会发送到任何你创建的用户的email帐号里。

这个功能刚刚被加在新的Mail gem里，因此我们需要升级mail到最新版本(至少2.1.3)。我们通过修改应用程序的Gemfile文件去获得正确的版本:

/Gemfile

gem "mail", "2.1.3"

然后我们运行bundle install去安装升级的版本。

接下来我们需要创建拦截器(interceptor)类。我们把这个文件命名为development_mail_interceptor.rb并把它放在/lib目录下。

/lib/development_mail_interceptor.rb

class DevelopmentMailInterceptor
  def self.delivering_email(message)
    message.subject = "[#{message.to}] #{message.subject}"
    message.to = "eifion@asciicasts.com"
  end
end

类方法delivering_email获得准备发送的email message，修改它的主题(subject)为原目标地址(message.to) 加上原主题(message.subject)。message的to字段也被修改，这样所有的email将会发到eifion@asciicasts.com。

我们需要把这个拦截器(interceptor)注册到我们的初始化文件(initializer)内:

/config/initializers/setup_mail.rb

Mail.register_interceptor(DevelopmentMailInterceptor) if Rails.env.development?

如果我们的应用程序运行在开发模式(development mode)下，我们的拦截器(interceptor)的delivering_email方法将会被调用。如果我们的Rails 3.0 包含升级了的Mail gem, 我们可以把方法调用Mail.register_interceptor替换为ActionMailer::Base.register_interceptor

当我们注册新用户的时候，注册确认email将永远发给eifion@asciicasts.com。原始的收件人(recipient)地址显示在主题栏。

当你开发你的应用程序的时候，这是个检查你的emails是否工作的好办法。

以上就是这章的全部了。我希望这章对你有用。新的ActionMailer API 让 Rails 应用程序发送email更加方便。

Unobtrusive JavaScript

Wed, 24 Mar 2010 08:04:46 +0000

译者前言： Unobtrusive JavaScript这个词在国内叫法不一，我也不知道如何翻译比较贴切，索性就直接采用英文了。一来避免造成误解，二来在大家Google或Wikipedia中也好查。 Unobtrusive JavaScript并不是Rails的概念，它只是合理组织JavaScript代码的一种方式。Rails 3只是使用这个方式优化自己生成的客户端代码而已。

这一集中我们将看看一个Rails 3的新特性：如何使用Unobtrusive JavaScript。Unobtrusive JavaScript是一种将web应用程序的行为和内容（或结构）分离的技术。就像CSS让我们可以分离表现和内容一样。这次我们就要讲述Rails 3是如何利用Unobtrusive JavaScript的，但在此之前，先看一个简单的例子。

下图是一个网页，当我们点击 Click Here 链接时，会用JavaScript弹出一个提示框显示"Hello World!"。

这个页面的HTML大概是这样：

<!DOCTYPE html>  
<html>  
  <head>  
    <title>UJS Example</title>  
  </head>  
  <body>  
    <h1><a href="#" onclick="alert('Hello world!'); return false;">Click Here</a></h1>  
  </body>  
</html>

在这个页面中有一个链接，它的onclick属性中含有一些JavaScript代码。把JavaScript内联在HTML标签中是一件很坏的事情，因为我们把结构和行为混合在一起了。回顾1990年，那时我们经常用font标签设置文本的字体、字号和颜色，因为当时还没有CSS。这意味着，如果我们需要改变网站的所有文字的字体，可能就要改动上数以百计的地方。直到CSS出现后，我们可以把样式提取出来，放到样式表中去。这使网站更加易于维护。

同样的道理也适用于JavaScript。把小段的JavaScript代码放到HTML标签的属性中，这样做混淆了焦点并使网站难以更新。将JavaScript放到单独文件中，降低了代码重复，便于重构，而且有利于编写和调试复杂的web应用程序。

那么怎么让这个简单例子中的JavaScript不再恼人呢？一个主要改动就是将内联的JavaScript放到单独的文件中，然后用一个JavaScript框架（这里用jQuery），将脚本挂到元素的事件上。下面就是我们改动后的页面。

<!DOCTYPE html>  
<html>  
  <head>  
    <title>UJS Example</title>  
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="UTF-8"></script>  
    <script type="text/javascript"charset="UTF-8">  
      $(function () {  
        $('#alert').click(function () {  
          alert('Hello, world!');  
          return false;  
        })  
      });  
    </script>  
  </head>  
  <body>  
    <h1><a href="#" id="alert">Click Here</a></h1>  
  </body>  
</html>

首先要声明的是，我们并没有把JavaScript放到单独的文件中，这只是为了更好地展示代码的改动。

对于body部分的链接，我们移除了 onclick 属性并加上了 id ，这样就可以用jQuery去找到该链接。在head部分，我们加上了jQuery库的引用，下面是一段JavaScript代码（这段代码本应放到单独的文件中）。在这段代码的开始，我们调用了jQuery的 $ 方法并以一个函数作为参数。这个函数会在页面的DOM加载时调用。在这个函数中，我们用jQuery的id选择器找到链接，然后给它的onclick事件绑定一个函数，这个函数用alert弹出"Hello World!"提示框，最后返回false来避免触发该链接默认的行为。

当我们刷新页面后，我们看到这个新页面和原来有着一样的效果（点击链接，弹出"Hello World!"）。

看起来我们做了更多工作，却没有什么明显效果。但这个简单的例子并没有充分展示出Unobtrusive JavaScript的优势，因为这个页面只有一处内联的JavaScript。而且这个例子不是为了检验Unobtrusive JavaScript的优点，只是演示整个过程是如何完成，和如何比较的。只有页面中有大量的JavaScript时，Unobtrusive JavaScript的优势才会显现出来。

目前这种做法有个问题，就是JavaScript经常被写到静态的文件中，然后被关联进页面。那么我们如何将服务端的动态内容放到JavaScript中去，而不使用内联的做法呢？

在HTML5中，我们可以使用动态的数据属性（data attribute）来存储一个元素的相关数据。这个动态属性和其他的元素属性一样，只是属性名要以 data- 开头。为了存储我们点击链接弹出的提示信息，我们把链接改写成如下形式：

<a href="#" id="alert" data-message="Hello from UJS">Click Here</a>

在JavaScript中，我们改写代码，从链接的新属性中取出信息然后用alert提示。

译者注：data attribute是HTML5的新特性之一，用于给一个元素存储数据信息。HTML5也提供了对应的JavaScript接口来访问这些数据属性。以下面的代码为例，获取链接的data-message属性还可以用this.dataset.message。但目前似乎没有浏览器支持这种语法……所以，目前只能用传统的getAttribute方法获取自定义属性。至于把自定义属性以 data- 开头的唯一作用，就是让HTML文档可以通过W3C的HTML 5标准检验。

$(function () {  
  $('#alert').click(function () {  
    alert(this.getAttribute('data-message'));  
    return false;  
   })  
});

现在我们刷新页面，就可以看到存储在数据属性中的提示信息。

Rails 3 如何使用数据属性

Rails 3 用它的方式去利用这些自定义的数据属性来将值传给Unobtrusive JavaScript。现在我们来看看一个Rails 3应用程序怎么去应用它们。我们的web应用程序是一个电子商务网站，用户可以在上面查询产品信息。每个产品都有相应的edit和destroy链接。但当我们点击destroy链接时，却发现它似乎并没有正常工作。

这对于Rails 3应用程序是一个很普遍的问题。如果你刚建立一个新的应用程序，或者把一个应用程序从旧版本的Rails中迁移上来，你就会发现一些使用了JavaScript的部分无法工作了。

下面是视图中用来生成Destroy链接的代码。它就是一个普通的 link_to 方法，有一个 :confirm 参数用来控制JavaScript的 confirm 弹出框的提示信息。还有一个 :method 参数被设置为 delete ，这样请求就会以delete方式而不是get方式提交。

/app/views/products/show.html.erb

<%= link_to "Destroy", @product, :confirm => "Are you sure?", :method => :delete %>

有趣的是它生成的HTML源代码：

<a href="/products/8" data-confirm="Are you sure?" data-method="delete" rel="nofollow">Destroy</a>

在Rails 2中，使用 link_to 生成destroy链接会生成一堆内联JavaScript代码，它用来创建 confirm 对话框，还会生成一个form去模拟delete请求。相比之下，Rails 3创建的代码更加的简洁，而且使用到了我们之前所讲的HTML5数据属性。其中 data-confirm 用来存放确认信息，data-method用来存放请求方式。

这个destroy链接没有工作的原因就是没有在页面的head部分引入相应的JavaScript文件。所以这个链接就会像正常的链接那样发起get请求，因为没有人告诉它该做什么。

为了修复这个问题，我们layout的head部分加入以下两行代码：

/app/views/layouts/application.html.erb

<%= javascript_include_tag :defaults %>  
<%= csrf_meta_tag %>

第一行代码很眼熟，它会加载Rails应用程序的基本JavaScript文件。第二行代码会创建两个meta标签来存放authenticity token。它会在delete请求中用到。如果我们刷新页面后看看源代码，就会看到这两行代码生成的HTML。

译者注：注意多出来的一个脚本rails.js。Rails 3 的Unobtrusive JavaScript就存放在这里

<script src="/javascripts/prototype.js?1268677667" type="text/javascript"></script>  
<script src="/javascripts/effects.js?1268677667" type="text/javascript"></script>  
<script src="/javascripts/dragdrop.js?1268677667" type="text/javascript"></script>  
<script src="/javascripts/controls.js?1268677667" type="text/javascript"></script>  
<script src="/javascripts/rails.js?1268677667" type="text/javascript"></script>  
<script src="/javascripts/application.js?1268677667" type="text/javascript"></script>  
<meta name="csrf-param" content="authenticity_token"/>  
<meta name="csrf-token" content="9ImdFvbeW7ih9oKqBDQ3O889q/hJ1q5uajpT4DFDAoA="/>

现在我们有了应用程序所需的所有JavaScript文件和两个meta标签。这两个meta标签用来防止跨站点的伪造请求，确保put和delete请求来自正确的用户，而不是来自其他站点或黑客。

现在有了这两行代码，我们的destroy链接就可以正常工作了。

为查询表单提供AJAX支持

下面我们要修改index页面中负责查询的form，使它用AJAX发起请求而不是直接发起get请求。index视图的form代码如下：

<% title "Products" %>  

<% form_tag products_path, :method => :get do %>  
  <p>  
    <%= text_field_tag :search, params[:search] %>  
    <%= submit_tag "Search", :name => nil %>  
  </p>  
<% end %>  

<div id="products">  
  <%= render @products %>  
</div>  

<p><%= link_to "New Product", new_product_path %></p>

这里的form使用了我们在第37集中讲到的技术。在旧版本的Rails中，如果我们要让form以AJAX方式提交，就要用 form_remote_tag 来代替 form_tag 。这个方法会生成大量的内联JavaScript，而这种情况正是我们一直想避免的。

因此，旧版本中很多remote版的helper方法都被移出了Rails 3。如果你还想使用这些旧方法，可以安装 Prototype Legacy Helper 这个插件来代替Rails 3的新方式（Unobtrusive JavaScript）。我们下面会讲到这种新的做法。

现在我们继续使用 form_tag ，而不是 form_remote_tag 。但给它加一个新参数 :remote 。

/app/views/products/index.html.erb

<% form_tag products_path, :method => :get, :remote => true do %>  
  <p>  
    <%= text_field_tag :search, params[:search] %>  
    <%= submit_tag "Search", :name => nil %>  
  </p>  
<% end

这个 :remote 参数也可以用在其他helper方法中，如 link_to ，button_to ，form_for 。如果我们刷新页面然后查看源码，可以看到新的form代码如下所示：

<form action="/products" data-remote="true" method="get">  <p>  
    <input id="search" name="search" type="text" />  
    <input type="submit" value="Search" />  
  </p>  
</form>

新的form标签和没使用 :remote 参数之前的版本没什么区别，只是加了一个 data-remote 属性。这足以告诉 rails.js 文件中的JavaScript，让form以AJAX的方式提交。

客户端的改造完成了，下面我们要写服务端代码来响应AJAX请求。产品列表都包含在一个 id 为products的 div 中，所以我们可以更新这个div的内容来显示查询出来的产品。form的提交请求将由 ProductsController 的 index 方法处理。我们现在要做的就是添加一个新的视图 index.js.erb 来处理js请求。

我们可以在这个视图中按自己的喜好写JavaScript，然后它会在客户端执行。这个新视图中的JavaScript代码用来更新 div 中的产品信息。

/app/views/products/index.js.erb

$("products").update("<%= escape_javascript(render(@products)) %>");

现在我们刷新页面然后查询一次，可以看到它已经变成了AJAX请求，而且页面的URL没有发生变化。

总而言之，通过使用 :remote 参数和执行服务端返回的JavaScript代码。Rails 3可以很容易地做到Unobtrusive JavaScript方式的AJAX。

切换JavaScript框架

我们最后加一点花絮，演示一下如何切换我们的应用程序使用的JavaScript框架。我们目前的程序默认使用Rails自带的Prototype，但如果我们要换成jQuery该怎么办呢？

首先我们要把application layout中的这段代码

/app/views/layouts/application.html.erb

<%= javascript_include_tag :defaults %>

换成

<%= javascript_include_tag "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js", "jquery.rails.js" %>

第一个文件是我们从google上获取的jQuery最新版，但这样还不够，因为我们还需要为 rails.js 找一个jQuery替代版本。它负责存放和Rails相关的 Unobtrusive JavaScript 代码。你可以在 jquery-ujs project on Github 找到官方版本。这个项目包含了我们所需的 rails.js 文件。我们把它下载到 public/javascripts 目录然后将它改名为 jquery.rails.js 。这就是我们的第二个文件。

现在我们需要把原来写过的Prototype代码改成jQuery版的。我们需要对之前创建的 index.js.erb 做两处改动。用 #products 选择器替换原先的 product ，然后把 update 方法换成jQuery中的 html 方法。

/app/views/products/index.js.erb

$("#products").html("<%= escape_javascript(render(@products)) %>");

现在，我们的程序还是和以前一样正常工作，只是底层框架已经换成了jQuery。

优雅的降级

如果用户使用禁用了JavaScript的浏览器访问我们的网站，查询form就会自动降级成使用get请求发起提交。但destroy链接就无法是使用了。因为链接只能使用get请求，而Rails是使用JavaScript来模拟delete请求的。一个解决办法就是使用 button_to 生成的按钮来代替链接。但按钮实在看起来太丑了。如果我们想继续使用链接，一个更好的办法是使用第77集所讲的技术，在删除之前显示一个单独的确认页面。

XSS Protection in Rails 3

Sat, 20 Mar 2010 23:03:46 +0000

回顾第27集[观看, 阅读]，我们详细介绍了跨站脚本攻击。这是每个网站开发人员都应该掌握的一门重要课程。在web应用中，当网页显示用户的输入内容时易受到xss攻击。因此，转义用户自行输入内容是很重要的，在Rails应用中，通常使用h方法来完成。

<%= h comment.content %>

使用h方法转义输出

在Rails 3中，输出可以自动转义，因此，无需在你的视图中再加入h方法。在此集中，我们将向你展示Rails3如何处理输出转义。

为了演示输出转义机制，我们将使用一个用Rails 3 编写的简单的博客应用。在这个应用中，我们拥有很多文章，而且每篇文章都有很多相关的评论。为测试评论系统如何应对跨站脚本攻击的尝试，我们在评论表单的每个字段中都输入<script>alert('I steal cookies!')</script>，然后提交我们这个恶意的评论。

当我们添加的这个评论在网页上显示出来之后，可以看到Rails 3已经自动转义了上述我们所提交的字段中的HTML标签。现在我们看看Rails是如何做到的。

显示每条评论的代码被包含在一个局部模板中，但是，如果你查看这些代码，你会发现并没有任何输出使用了h转义。

/app/views/comments/_comment.html.erb

<div class="comment">
  <strong><%= link_to comment.name, comment.url %></strong>
  <p><%= comment.content %></p>
</div>

在Rails2中这意味着将会显示alert信息，但是所有在局部模板中的输出都会被Rails 3正确的转义，即使是通过了诸如link_to之类的helper方法也是如此，所以这里不需使用h方法。

想想，如果我们正在转换一个Rails 2的应用，其中的输出都使用了h进行转义，会发生什么？通过转义前述局部模板的输出并重载该页我们可以找出答案。

/app/views/comments/_comment.html.erb

<div class="comment">
  <strong><%= link_to h(comment.name), comment.url %></strong>
  <p><%= h comment.content %></p>
</div>

当我们重新装载页面，可以看到页面看起来与上次是一样的，输出并没有被重复转义。Rails很聪明；即便我们使用了h方法，它也只会进行一次脚本标签的转义。

看起来似乎h方法在Rails 3中没什么用，其实不然。它仍然有一个作用，稍后我们会向你演示是什么。在这之前，我们要先看一个相关特性。也许有时当我们想显示原始内容时，能自动转义输出是很好的。但如果我们信任用户输入的内容，比如说他们是管理员，并且我们想精确的显示他们输入了什么，就可以使用新的raw方法来实现。

<div class="comment">
  <strong><%= link_to comment.name, comment.url %></strong>
  <p><%= raw comment.content %></p>
</div>

如果现在我们重新载入页面，我们在评论栏输入的JavaScript就会被执行。

所以，在Rails3中，无论何时，当我们不希望内容被HTML转义时，我们就可以使用raw方法。但是这是如何实现的？在何时转义内容和何时不转义内容方面，Rails3看起来相当的聪明。现在我展示给你们看它是怎样实现的。

我们将在console中演示转义功能，在Rails 3中我们可以用rails c 命令来唤出它。

$ rails c
Loading development environment (Rails 3.0.0.beta)
ruby-1.9.1-p378 >

Rails 3 引入了HTML安全字符串的概念。这意味着可以通过调用新的html_safe?方法来检查字符串作为HTML输出是否安全。

> "foo".html_safe?
 => false

我们可以通过调用html_safe方法来标记一个字符串是HTML安全的。

> safe = "safe".html_safe
 => "safe" 
> safe.html_safe?
 => true

这里实际上没有进行转义。所发生的一切只是对一个字符设置了一个布尔属性来指示它在输出前是否要被转义。

那么这是如何应用在我们的视图模板中的呢。Rails会检查每个输出看它是否被标记为HTML安全的。如果不是，在输出到页面时它将被自动转义。反之，它将直接通过而不会被转义。如果我们使用h方法来转义一个字符串，该字符串将会被执行转义动作，同时被标记为HTML安全的。这就意味着Rails 3将会认为该字符串是安全的而不会再次转义它。

当在一个字符串上使用raw方法时，它将被标记为HTML安全的但不被转义，从而确保该字符串的内容会不被修改的传递到输出。

当你使用helper方法时，理解这些是非常重要的。我们将会创建一个名叫strong的helper方法来解释这个问题，这个方法会将任何传递给它的东西包装在 <strong>标签里。我们将在模板中像这样使用它：

/app/views/comments/_comment.html.erb

<div class="comment">
  <%= strong link_to(comment.name, comment.url) %>
  <p><%= raw comment.content %></p>
</div>

我们在 ApplicationHelper 中创建了strong方法:

/app/helpers/application_helper.rb

module ApplicationHelper
  def strong(content)
    "<strong>#{content}</strong>"
  end
end

当重载页面时，我们可以看到它并没有按照我们预想的方式工作。

Rails 3的自动转义机制会转义掉<strong>标签，这是因为我们辅助方法没有创建一个HTML安全的字符串。

当使用返回结果是HTML代码的辅助方法时，我们必须遵循两条简单的原则。第一，我们必须保证任何返回字符串被标记为HTML安全的。

/app/helpers/application_helper.rb

module ApplicationHelper
  def strong(content)
    "<strong>#{content}</strong>".html_safe
  end
end

这修正了 <strong>标签被转义的问题，但这么做会导致这个标签内的内容不被转义。我们可以通过用h方法转义这些内容来解决这个问题：

/app/helpers/application_helper.rb

module ApplicationHelper
  def strong(content)
    "<strong>#{h(content)}</strong>".html_safe
  end
end

所以只要我们记得使用h方法来转义所有的输入，然后把结果字符串标记为html_safe的，它就会正确的呈现。如果现在我们重载评论页面，可以看到<strong>标签没有被转义，但是第二条评论中包含了有潜在危险的JavaScript的内容被转义了。

以上就是本集的主要内容。自动转义机制是Rails 3视图中的一个广受欢迎的增强。它使得我们不再需要记住用hh来转义每一处输出，这样就减少了您的应用成为跨站脚本攻击的受害者的机会。

Routing in Rails 3

Sat, 06 Mar 2010 16:18:05 +0000

这一集我们继续研究Rails的新特性, 这次我们看一下Rails 3的路由. Rails 3提供了一些新的API和新的功能来定义路由. 为了更好的演示，我们先建立一个detour应用。

rails detour

建立好应用之后，我们可以打开config/routes.rb文件看一下. 默认的文件包含了一些演示新API的文档和例子，当你有空的时候，这些都值得一看。我们先删掉自带的文档，换上老的格式，再来对比一下Rails 3新的用法。

/config/routes.rb

Detour::Application.routes.draw do |map|
  map.resources :products, :member => { :detailed => :get }

  map.resources :forums, :collection => { :sortable => :get, :sort => :put } do |forums|
    forums.resources :topics
  end

  map.root :controller => "home", :action => "index"

  map.about "/about", :controller => "info", :action => "about"
end

以上是需要转化的老格式。

我们先从这一个开始：

map.resources :products, :member = { :detailed => :get }

这个路由有一个product资源，和一个叫做detailed的action,可以通过Get方法请求。

Rails 3第一个值得注意的改变，就是我们不再使用map对象，取而代之的是在routes.draw块里面直接调用resources。resources包括的:member和:collection 动作，可以通过一个块来定义，上述的路由可以新格式是这样:

resources :products do
  get :detailed, :on => :member
end

下面，我们来看以下更复杂的路由：

map.resources :forums, :collection => { :sortable => :get, :sort => :put } do |forums|
  forums.resources :topics
end

这个路由，在forum资源里面，我们有两个额外的:collection动作，还有一个嵌套的Topic资源。新的API中，可以写成这样：

resources :forums do
  collection do
    get :sortable
    put :sort
  end
  resources :topics
end

以上代码在一次展示了取消map.resources,直接用resources块。我们有两个collection动作，尽管我们可以像第一个例子中detailed动作一样使用:on，但我们这里用collection块达到了同样的效果 (member动作也可以使用member块)。任何在这个块里面定义的路由，都会作用在forums的集合上。在我们的例子中，我们定义了两个，一个是GET方法的sortable和PUT方法的sort。

至于嵌套的topics资源，我们可以在forums的块里再次调用resources，起到嵌套的效果。

下一个路由，我们看一下怎么定义root的控制器和动作。

map.root :controller => "home", :action => "index"

这里，我们可以直接调用root，用:to来定义要转到的动作，控制器跟动作之间，可以用#来区隔。

root :to => "home#index"

用一个#分隔的字符串来定义控制器跟动作，是Rails 3的新特性之一。我们可以用类似的格式来定义named路由。

map.about "/about", :controller => "info", :action => "about"

Rails 3中改写成这样：

match "/about" => "info#about", :as => :about

没有:as参数，这个路由就是单纯的转向”/about”, 加了:as 之后，在我们的应用里面可以使用about_path或者about_url。

新功能

从上面的例子可以看出，只需要微小的改动，就可以从老的API转化到新的API，但是真正吸引人的是新API提供的一些新功能，下面我们来看其中的一部分。

可选参数

前一个版本就已经有对可选参数的支持，但是用法比较麻烦，下面我们来看一下Rails 3中怎么使用。

我们建立一个info控制器和about动作来展示可选参数。Rails 3支持用rails g来作为rails generate的快捷方式。

rails g controller info about

我们可以用rails s快捷方式来启动服务器

rails s

现在我们打开http://localhost:3000/about, 我们会转到之前已经在路由配制文件里面定义的info#about动作。

假设我们下一步想要添加对pdf格式的支持，可是现在打开http://localhost:3000/about.pdf的话，我们会看到一个路由错误，提示没有定义路由。

在路由文件里，我们可以添加一个format参数。

match "/about.:format" => "info#about", :as => :about

如果我们刷新页面，这次会得到应用找不到template错误。

我们已经解决了之前的问题，但是format参数不是可选参数，如果我们返回之前没有.pdf后缀的页面，我们会遇到路由错误，我们可以做简单的改动，只需用括号括起来，就可以让format变为可选参数。

match "/about(.:format)" => "info#about", :as => :about

然后我们可以正常的打开http://localhost:3000/about 或者 http://localhost:3000/about.pdf。

下面，我们来看一下怎么使用更为复杂的可选参数，例如，我们现在有一个博客应用，我们想要在网址中，用可选的年月日来过滤一段特定时间的贴子。

我们可以用下面的路由达到这个效果，主义括号可以嵌套起来定义多个可选参数。

match "/:year(/:month(/:day))" => "info#about"

在view中，我们添加一些调试信息，来检查传入的参数：

/app/views/info/about.html.erb

<h1>Info#about</h1>
<p>Find me in app/views/info/about.html.erb</p>
<%= debug params %>

下面，如果我们传入year参数，about动作会收到我们传入的值，month和day参数也是如此。

这个路由是比较宽泛的，如果我们传入，例如http://localhost:3000/foo/bar，这样的参数也会被传到控制器，很显然，想要符合日期规范的参数，我们可以用constraints来达到这样的目的。

Constraints

Constraints 就是Rails 2中的requirements. :constraints可以传入一个hash来限定匹配。以下的例子用四个数字来限定年，两个数字来限定月和日。

match "/:year(/:month(/:day))" => "info#about", :constraints => { :year => /\d{4}/, :month => /\d{2}/, :day => /\d{2}/ }

添加了这个constraint之后，我们再看一下/foo/bar路径，这次我们得到了一个无法匹配的错误。

我们现在做的，Rails 2的requirements都可以做到。但是Rails 3的Constraint更加强大。

例如，我们可以用user_agent参数来限制一些浏览器的访问，以Firefox为例。

match "/secret" => "info#about", :constraints => { :user_agent => /Firefox/ }

如果我们用Safari, Chrome或者Opera访问页面，我们会看到一个匹配错误。但是Firefox可以正常浏览。

我们也可以添加一些更有用处的constraint比如主机名。

match "/secret" => "info#about", :constraints => { :host => /localhost/ }

使用这个constraint，我们可以通过http://localhost:3000/secret来浏览网页，但是用ip地址将会返回错误( http://127.0.0.1/secret )，其实两个地址本质上都是一样的。这个功能可以用来限制某些二级域名的访问，目前这一部分还在开发中，在以后的版本中，constraint可以传入:subdomain参数。

如果我们有多个路由同时使用一个constraint，会造成很多代码的重复。我们可以用constraints方法把这些路由放到一个块中来降低代码重复。

constraints :host => /localhost/ do
  match "/secret" => "info#about"
  match "/topsecret" => "info#about"
end

还有很多constraint的高级功能，就不在这里一一赘述了。

Rack路由

因为时间的关系，我们没办法涵盖所有Rails3的路由改进，我们会在未来的视频里慢慢接触。我今天想介绍的最后一个功能，是Rails 3路由与Rack的集成。通常我们将地址匹配到一个控制器和动作，但是我们也可以匹配给一个Rack应用，这是一个非常强大的功能，我用一个简单的Rack应用来展示这个功能。

match "/hello" => proc { |env| [200, {}, "Hello Rack!"] }

如果你不是很熟悉Rack，可以看一下第151集视频，我们上面代码就是返回HTTP成功代码，和很简单的内容。

我们访问 /hello 就可以看到“Hello Rack!，以此我们可以看出Rack工作正常并响应请求.你可以用这个强大的功能将路由转到不同的应用。比如可以将路由匹配到Sinatra应用。

Rails 3的路由功能带来了很多令人振奋的可能性，尽管今天我们只是大体地介绍了一下，以后我们会详细的介绍一部分具体用法。

如果你需要更多Rails 3的路由信息，可以参考Yehuda Katz的博客和RailsGuides.