Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
张重言
rails
提交
8c38172b
R
rails
项目概览
张重言
/
rails
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
R
rails
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
8c38172b
编写于
10月 23, 2012
作者:
X
Xavier Noria
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
JS guide: AJAX -> Ajax
We discussed this on Twitter, seems to be the best option.
上级
69e9715f
变更
1
显示空白变更内容
内联
并排
Showing
1 changed file
with
17 addition
and
17 deletion
+17
-17
guides/source/working_with_javascript_in_rails.md
guides/source/working_with_javascript_in_rails.md
+17
-17
未找到文件。
guides/source/working_with_javascript_in_rails.md
浏览文件 @
8c38172b
...
...
@@ -2,21 +2,21 @@ Working With JavaScript in Rails
================================
This guide covers the built-in Ajax/JavaScript functionality of Rails (and
more); it will enable you to create rich and dynamic A
JAX
applications with
more); it will enable you to create rich and dynamic A
jax
applications with
ease! We will cover the following topics:
*
Quick introduction to A
JAX
*
Quick introduction to A
jax
*
Unobtrusive JavaScript
*
How Rails' built-in helpers assist you
*
Handling A
JAX
on the server side
*
Handling A
jax
on the server side
*
The Turbolinks gem
-------------------------------------------------------------------------------
An introduction to A
JAX
An introduction to A
jax
------------------------
In order to understand A
JAX
, you must first understand what a web browser does
In order to understand A
jax
, you must first understand what a web browser does
normally.
When you type
`http://localhost:3000`
into your browser's address bar and hit
...
...
@@ -30,13 +30,13 @@ JavaScript can also make requests to the server, and parse the response. It
also has the ability to update information on the page. Combining these two
powers, a JavaScript writer can make a web page that can update just parts of
itself, without needing to get the full page data from the server. This is a
powerful technique that we call A
JAX
.
powerful technique that we call A
jax
.
Rails ships with CoffeeScript by default, and so the rest of the examples
in this guide will be in CoffeeScript. All of these lessons, of course, apply
to vanilla JavaScript as well.
As an example, here's some CoffeeScript code that makes an A
JAX
request using
As an example, here's some CoffeeScript code that makes an A
jax
request using
the jQuery library:
```
...
...
@@ -133,10 +133,10 @@ Built-in Helpers
----------------------
Rails provides a bunch of view helper methods written in Ruby to assist you
in generating HTML. Sometimes, you want to add a little A
JAX
to those elements,
in generating HTML. Sometimes, you want to add a little A
jax
to those elements,
and Rails has got your back in those cases.
Because of Unobtrusive JavaScript, the Rails "A
JAX
helpers" are actually in two
Because of Unobtrusive JavaScript, the Rails "A
jax
helpers" are actually in two
parts: the JavaScript half and the Ruby half.
[
rails.js
](
https://github.com/rails/jquery-ujs/blob/master/src/rails.js
)
provides the JavaScript half, and the regular Ruby view helpers add appropriate
...
...
@@ -163,7 +163,7 @@ This will generate the following HTML:
</form>
```
Note the
`data-remote='true'`
. Now, the form will be submitted by A
JAX
rather
Note the
`data-remote='true'`
. Now, the form will be submitted by A
jax
rather
than by the browser's normal submit mechanism.
You probably don't want to just sit there with a filled out
`<form>`
, though.
...
...
@@ -212,7 +212,7 @@ which generates
<a href="/posts/1" data-remote="true">a post</a>
```
You can bind to the same A
JAX
events as
`form_for`
. Here's an example. Let's
You can bind to the same A
jax
events as
`form_for`
. Here's an example. Let's
assume that we have a resource
`/fib/:n`
that calculates the
`n`
th Fibonacci
number. We would generate some HTML like this:
...
...
@@ -247,8 +247,8 @@ Since it's just a `<form>`, all of the information on `form_for` also applies.
Server side concerns
--------------------
A
JAX
isn't just client-side, you also need to do some work on the server
side to support it. Often, people like their A
JAX
requests to return JSON
A
jax
isn't just client-side, you also need to do some work on the server
side to support it. Often, people like their A
jax
requests to return JSON
rather than HTML. Let's discuss what it takes to make that happen.
### A Simple Example
...
...
@@ -297,7 +297,7 @@ provides a form to create a new user.
The bottom form will call the create action on the Users controller. Because
the form's remote option is set to true, the request will be posted to the
users controller as an A
JAX
request, looking for JavaScript. In order to
users controller as an A
jax
request, looking for JavaScript. In order to
service that request, the create action of your controller would look like
this:
...
...
@@ -321,7 +321,7 @@ this:
```
Notice the format.js in the respond_to block; that allows the controller to
respond to your A
JAX
request. You then have a corresponding
respond to your A
jax
request. You then have a corresponding
`app/views/users/create.js.erb`
view file that generates the actual JavaScript
code that will be sent and executed on the client side.
...
...
@@ -333,14 +333,14 @@ Turbolinks
----------
Rails 4 ships with the
[
Turbolinks gem
](
https://github.com/rails/turbolinks
)
.
This gem uses A
JAX
to speed up page rendering in most applications.
This gem uses A
jax
to speed up page rendering in most applications.
### How Turbolinks works
Turbolinks attaches a click handler to all
`<a>`
on the page. If your browser
supports
[
PushState
](
https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history#The_pushState(\
)
.C2.A0method),
Turbolinks will make an A
JAX
request for the page, parse the response, and
Turbolinks will make an A
jax
request for the page, parse the response, and
replace the entire
`<body>`
of the page with the
`<body>`
of the response. It
will then use PushState to change the URL to the correct one, preserving
refresh semantics and giving you pretty URLs.
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录