Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
张重言
rails
提交
94aadf76
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,发现更多精彩内容 >>
提交
94aadf76
编写于
10月 28, 2012
作者:
C
Carlos Antonio da Silva
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Add syntax highlight to code blocks in javascript guide [ci skip]
上级
f47026e7
变更
1
显示空白变更内容
内联
并排
Showing
1 changed file
with
25 addition
and
27 deletion
+25
-27
guides/source/working_with_javascript_in_rails.md
guides/source/working_with_javascript_in_rails.md
+25
-27
未找到文件。
guides/source/working_with_javascript_in_rails.md
浏览文件 @
94aadf76
...
...
@@ -39,7 +39,7 @@ to vanilla JavaScript as well.
As an example, here's some CoffeeScript code that makes an Ajax request using
the jQuery library:
```
```
coffeescript
$
.
ajax
(
url
:
"/test"
).
done
(
html
)
->
$
(
"#results"
).
append
html
```
...
...
@@ -63,35 +63,35 @@ demonstrate other ways.
Here's the simplest way to write JavaScript. You may see it referred to as
'inline JavaScript':
```
```
html
<a
href=
"#"
onclick=
"alert('Hello, world.')"
>
Here
</a>
```
When clicked, the alert will trigger. Here's the problem: what happens when
we have lots of JavaScript we want to execute on a click?
```
```
html
<a
href=
"#"
onclick=
"function fib(n){return n<2?n:fib(n-1)+fib(n-2);};alert('fib of 15 is: ' + fib(15) + '.');"
>
Calculate
</a>
```
Awkward, right? We could pull the function definition out of the click handler,
and turn it into CoffeeScript:
```
```
coffeescript
fib
=
(
n
)
->
(
if
n
<
2
then
n
else
fib
(
n
-
1
)
+
fib
(
n
-
2
))
```
And then on our page:
```
```
html
<a
href=
"#"
onclick=
"alert('fib of 15 is: ' + fib(15) + '.');"
>
Calculate
</a>
```
That's a little bit better, but what about multiple links that have the same
effect?
```
```
html
<a
href=
"#"
onclick=
"alert('fib of 16 is: ' + fib(16) + '.');"
>
Calculate
</a>
<a
href=
"#"
onclick=
"alert('fib of 17 is: ' + fib(17) + '.');"
>
Calculate
</a>
<a
href=
"#"
onclick=
"alert('fib of 18 is: ' + fib(18) + '.');"
>
Calculate
</a>
...
...
@@ -101,7 +101,7 @@ Not very DRY, eh? We can fix this by using events instead. We'll add a `data-*`
attribute to our link, and then bind a handler to the click event of every link
that has that attribute:
```
```
coffeescript
fib
=
(
n
)
->
(
if
n
<
2
then
n
else
fib
(
n
-
1
)
+
fib
(
n
-
2
))
...
...
@@ -149,7 +149,7 @@ attributes, and attaches appropriate handlers.
is a helper that assists with writing forms.
`form_for`
takes a
`:remote`
option. It works like this:
```
```
erb
<%=
form_for
(
@post
,
remote:
true
)
do
|
f
|
%>
...
<%
end
%>
...
...
@@ -157,7 +157,7 @@ option. It works like this:
This will generate the following HTML:
```
```
html
<form
accept-charset=
"UTF-8"
action=
"/posts"
class=
"new_post"
data-remote=
"true"
id=
"new_post"
method=
"post"
>
...
</form>
...
...
@@ -170,14 +170,12 @@ You probably don't want to just sit there with a filled out `<form>`, though.
You probably want to do something upon a successful submission. To do that,
bind to the
`ajax:success`
event. On failure, use
`ajax:error`
. Check it out:
```
<script>
```
coffeescript
$
(
document
).
ready
->
$
(
"#new_post"
).
on
(
"ajax:success"
,
(
e
,
data
,
status
,
xhr
)
->
$
(
"#new_post"
).
append
xhr
.
responseText
).
bind
"ajax:error"
,
(
e
,
xhr
,
status
,
error
)
->
$
(
"#new_post"
).
append
"<p>ERROR</p>"
</script>
```
Obviously, you'll want to be a bit more sophisticated than that, but it's a
...
...
@@ -189,7 +187,7 @@ start.
is very similar to
`form_for`
. It has a
`:remote`
option that you can use like
this:
```
```
erb
<%=
form_tag
(
'/posts'
,
remote:
true
)
%>
```
...
...
@@ -202,13 +200,13 @@ details.
is a helper that assists with generating links. It has a
`:remote`
option you
can use like this:
```
```
erb
<%=
link_to
"first post"
,
@post
,
remote:
true
%>
```
which generates
```
```
html
<a
href=
"/posts/1"
data-remote=
"true"
>
a post
</a>
```
...
...
@@ -216,13 +214,13 @@ You can bind to the same Ajax 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:
```
```
erb
<%=
link_to
"Calculate"
,
"/fib/15"
,
remote:
true
,
data:
{
fib:
15
}
%>
```
and write some CoffeeScript like this:
```
```
coffeescript
$
(
document
).
ready
->
$
(
"a[data-fib]"
).
on
"ajax:success"
,
(
e
,
data
,
status
,
xhr
)
->
count
=
$
(
this
).
data
(
"fib"
)
...
...
@@ -233,13 +231,13 @@ $(document).ready ->
[
`button_to`
](
http://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html#method-i-button_to
)
is a helper that helps you create buttons. It has a
`:remote`
option that you can call like this:
```
```
erb
<%=
button_to
"A post"
,
@post
,
remote:
true
%>
```
this generates
```
```
html
<form
action=
"/posts/1"
class=
"button_to"
data-remote=
"true"
method=
"post"
>
<div><input
type=
"submit"
value=
"A post"
></div>
</form>
...
...
@@ -260,7 +258,7 @@ Imagine you have a series of users that you would like to display and provide a
form on that same page to create a new user. The index action of your
controller looks like this:
```
```
ruby
class
UsersController
<
ApplicationController
def
index
@users
=
User
.
all
...
...
@@ -271,7 +269,7 @@ class UsersController < ApplicationController
The index view (
`app/views/users/index.html.erb`
) contains:
```
```
erb
<b>
Users
</b>
<ul
id=
"users"
>
...
...
@@ -291,7 +289,7 @@ The index view (`app/views/users/index.html.erb`) contains:
The
`app/views/users/_user.html.erb`
partial contains the following:
```
```
erb
<li>
<%=
user
.
name
%>
</li>
```
...
...
@@ -304,7 +302,7 @@ users controller as an Ajax request, looking for JavaScript. In order to
service that request, the create action of your controller would look like
this:
```
```
ruby
# app/controllers/users_controller.rb
# ......
def
create
...
...
@@ -328,7 +326,7 @@ respond to your Ajax 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.
```
```
erb
$("
<%=
escape_javascript
(
render
@user
)
%>
").appendTo("#users");
```
...
...
@@ -355,7 +353,7 @@ and put `//= require turbolinks` in your CoffeeScript manifest, which is usually
If you want to disable Turbolinks for certain links, add a
`data-no-turbolink`
attribute to the tag:
```
```
html
<a
href=
"..."
data-no-turbolink
>
No turbolinks here
</a>
.
```
...
...
@@ -364,7 +362,7 @@ attribute to the tag:
When writing CoffeeScript, you'll often want to do some sort of processing upon
page load. With jQuery, you'd write something like this:
```
```
coffeescript
$
(
document
).
ready
->
alert
"page has loaded!"
```
...
...
@@ -373,7 +371,7 @@ However, because Turbolinks overrides the normal page loading process, the
event that this relies on will not be fired. If you have code that looks like
this, you must change your code to do this instead:
```
```
coffeescript
$
(
document
).
on
"page:change"
,
->
alert
"page has loaded!"
```
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录