`
sunfengcheng
  • 浏览: 181103 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

使用 RJS 模版来更新页面

JavaJavaScriptAjaxFlashprototype 
阅读更多
[size=large][color=indigo]使用 RJS 模版来更新页面
如果你想使用 ajax 来调用更新页面中的多个 ＯＤＭ元素，　具体的说你想在一个应用程序中允许更新你的恶添加项等操作。
　
还是在你的布局中将　Ｐｒｏｔｏｔｙｐｅ　和样式包含进去 


app/views/layouts/tasks.rhtml:

<html>
<head>
  <title>Tasks: <%= controller.action_name %></title>
  <%= javascript_include_tag :defaults %>
  <%= stylesheet_link_tag 'scaffold' %>
</head>
<body>

<p style="color: green"><%= flash[:notice] %></p>

<%= yield %>

</body>
</html>
通过载入　一个局部模版，ｉｎｄｅｘ视图中显示了任务列表，　 
app/views/tasks/index.rhtml:

<h1>My Tasks</h1>

<div id="notice"></div>

<div id="task_list">
  <%= render :partial => 'list' %>
</div>

<br />

<% form_remote_tag :url => {:action => 'add_task'} do %>
  <p><label for="task_name">Add Task</label>;
  <%= text_field 'task', 'name'  %></p>  
  <%= submit_tag "Create" %>
<% end %>

＿ｌｉｓｔ．ｒｈｔｍｌ　局部模版将迭代所用的任务，并显示成列表。 
app/views/tasks/_list.rhtml:

<ul>
<% for task in @tasks %>
  <% for column in Task.content_columns %>
    <li><%=h task.send(column.name) %></li>
  <% end %>
<% end %>
</ul>
接着，　　　为了显示和添加的恶任务，定义两个方法　ｉｎｄｅｘ和ａｄｄ＿ｔａｓｋ。 
app/controllers/tasks_controller.rb:

class TasksController < ApplicationController

  def index
    @tasks = Task.find :all
  end

  def add_task
    @task = Task.new(params[:task])
    @task.save
    @tasks = Task.find :all
  end
end


最后创建一个ＲＪＳ模版，用来定义那些元素使用　ｊａｖａｓｃｒｉｐｔ　来更新 
app/views/tasks/add_task.rjs:

page.replace_html 'notice', 
    "<span style=\"color: green;\">#{@tasks.length} tasks,  
         updated on #{Time.now}</span>" 

page.replace_html 'task_list', :partial => 'list'

page.visual_effect :highlight, 'task_list', :duration => 4
[/color][/size]
3
顶
0
踩
分享到：
| 监控文本区域的内容长度
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics