Oh!Coder

Coding Life

Gon Gem简介

| Comments

今天想记录的一个gem的名字叫gon。这个gem的主要解决的问题是从controller中的action里直接传参到js文件。

应用背景

当你想从controller传一些启始数据到js文件中时,可能会做如下几件事情:

1、在controller中把数据先写到变量里
2、在此action对应的view层中,把controller中定义的变量通过定义data属性的方式,或在view中直接使用
3、在view层的js中使用,还会分两种情况:

  • 如果是预先把数据写成data属性的方式,那么在js文件中需要对这些属性进行写入或解析。
  • 如果是直接在view层的erb文件中直接嵌入js代码(这么做会被很多前端工程师所鄙视),那么只需要在js代码中直接使用即可。

4、可以在js文件中使用你的数据。

每一次当你需要为js传递变量的时候,都需要经过上面的几个步骤。

1、如果使用gon,只需要先在controller中如下声明变量

1
2
3
4
5
6
7
8
9
gon.variable_name = variable_value

# or new syntax
gon.push({
  :user_id => 1,
  :user_role => "admin"
})

gon.push(any_object) # any_object with respond_to? :each_pair

2、在js文件中获取此变量

1
gon.variable_name

基本使用

对于Rails 4以后的版本,做如下简单设置

app/views/layouts/application.html.erb文件中,添加如下一行代码:

1
2
<%= Gon::Base.render_data({}) %>
...

当然,你可以在include_gon方法中传递一些可选项

在controller的action中,可以做一些如下操作:

1
2
3
4
5
6
7
8
9
10
11
12
13
@your_int = 123
@your_array = [1,2]
@your_hash = {'a' => 1, 'b' => 2}
gon.your_int = @your_int
gon.your_other_int = 345 + gon.your_int
gon.your_array = @your_array
gon.your_array << gon.your_int
gon.your_hash = @your_hash

gon.all_variables # > {:your_int => 123, :your_other_int => 468, :your_array => [1, 2, 123], :your_hash => {'a' => 1, 'b' => 2}}
gon.your_array # > [1, 2, 123]

gon.clear # gon.all_variables now is {}

从javascript文件中可以直接访问这些变量:

1
2
3
4
alert(gon.your_int)
alert(gon.your_other_int)
alert(gon.your_array)
alert(gon.your_hash)

AMD(Asynchronous module definition) 兼容版本:include_gon_amd

如果你的网站使用了AMD module,可以使用include_gon_amd辅助方法把变量和可见的function作为一个module。操作很像include_gon,除了什么都不做的namespace_check以及用来定义module名称定义的namespace。最终看起来如下:

1
2
3
4
5
6
7
define('yourNameSpace', [], function() {
  var gon = {};
  gon.yourVariable = yourValue;
  // etc...

  return gon;
});

举一个(非常)简单的例子:

app/views/layouts/application.html.erb文件中添加如下代码:

1
include_gon_amd namespace: 'data'

一些javascript的module如下:

1
2
3
define(['data'], function(data) {
  alert(data.myVariable);
});

gon.watch-很容易刷新数据

在不用重新加载页面以及写长长的js方法就可以刷新数据。对于一些变动的数值非常有效。

支持gon.watch.rablgon.watch.jbuilder

gon.watch的使用说明

结合Rabl使用

可以使用Rabl在template中写入你的变量。写Rabl的template方法在他们的repo中有非常清晰的描述。

在gon中使用Rabl的好处:

1、让controller变得更简洁!
2、和database的object和collection更清晰和容易
3、Rabl的所有好处
4、你依然可以保持很懒,不使用常规的方式来向js中传数据

详见在gon中使用Rabl的使用说明

结合Rabl-Rails使用

gon.rablrabl-rails一起工作。想学习如何使用rabl-rails方法来写RABL可参见这里

添加gon和rabl-rails:

1
2
gem 'gon'
gem 'rabl-rails'

使用rabl-rails关键字定义一个rabl template:

1
2
3
#app/views/users/show.rabl
object :@user
attributes :id, :name, :email, :location

在controller中调用gon.rabl

1
2
3
4
5
#app/controllers/users_controller.rb
def show
  @user = User.find(params[:id])
  gon.rabl
end

结合Jbuilder使用

在gon中使用JbuilderRabl类似:

详情可参见相应的使用说明

gon.global

可以从任何地方向js发送数据!对于一些初始化数据来说,这一点非常的棒。

对于gon.global的使用可参见使用说明

加速Gon

可以使用任何你想使用的JSON Engine。Gon使用MultiJson自动进行检测,你需要做的就是require你的JSON库。

更多

更多更详细以及更新的介绍,可参见原文档

Comments