应用 RJS 模版来更新页面-JavaSript-爱易网页

应用 RJS 模版来更新页面

日期：2014-05-16　浏览次数：20411 次

使用 RJS 模版来更新页面
[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]

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

应用 RJS 模版来更新页面

相关资料更多>

推荐阅读更多>