轨道/ AJAX部分呈现 [英] Rails/AJAX partial rendering

查看:100
本文介绍了轨道/ AJAX部分呈现的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我做了有一个项目模型的应用程序。该模型具有存储在它的一些信息,并且用户可以添加注释到项目(使用评论模型) 。在项目的展示来看我希望用户能够之间的信息部分(包含项目信息进行切换,以及注释部分(含意见写在这个项目)。我想用这样做。AJAX因此,我将有两个按钮:资讯,以及评论

I made an application that has a project model. The model has some information stored in it, and a user can add comments to the project (using the comment model). In the show view of a project I want the user to be able to switch between an "info" partial (containing the project information, and a "comment" partial (containing the comments wrote on the project). I want to do this using AJAX. So I will have two buttons: Information & Comments.

现在我知道如何使部分基于远程连接,但我还必须找出哪些链接被点击。到目前为止,当一个链接被点击像这样我就可以使一个部分:

Now I know how to render a partial based on a "remote link", but I'll also have to find out which link was clicked. So far I can render one partial when one link is clicked like so:

// In show.html.haml

= link_to("Information", :project, :id => "link_one", :remote => true)
= link_to("Comments", :project, :id => "link_two", :remote => true)

#partial_window


// In show.js.haml
$("#partial_window").html("#{j(render("comments"))}")

现在这使得该 _comment.html.haml 部分,当我点击一个链接。我需要知道的是如何检查的的链接被点击,然后渲染适当的部分: _info.html.haml _comments.html.haml

Now this renders the _comment.html.haml partial when I click on one of the links. What I need to know is how to check which link was clicked, and then render the appropriate partial: _info.html.haml or _comments.html.haml.

在此先感谢您的帮助!

推荐答案

像这样的应该的工作。我们将使用嵌套路线。请查看瑞安的截屏(有点老了,但它得到的点对面),或者这更的 http://railscasts.com/episodes/196-nested-model-form-revised">updated版本(使用同样的原理)。你必须支付的更新版本,但我觉得我RailsCast订阅超过值得$ 9 /月。此外,这里是文档的例子。

Something like this should work. We are going to use nested routes. Check out ryan's screencast (a little old, but it gets the point across) or this more updated version about nested forms (uses the same principles). You'll have to pay for the updated version, but I find my RailsCast subscription to be more than worth the $9/month. Also, here are the docs for examples.

配置/ routes.rb中

resources :projects do
  resources :comments
end

comments_controller.rb

class CommentsController < ApplicationController
  def index
    project = Project.find params[:project_id]
    @comments = project.comments
    respond_to do |format|
     format.html #responds with default html file
     format.js #this will be the javascript file we respond with
    end
  end
end

意见/评论/ index.js.erb的

$('#holderDiv').empty().append('<ul> <%= j render @comments %> </li>')

本使用轨道一记漂亮的东西,寻找一个评论部分,并使得它在 @comments 。第j助手逃脱JavaScript和pretty的多刀片渲染部分进入追加的功能。

This uses a nifty thing of rails that looks for a comment partial and renders it for each comment in @comments. The j helper escapes javascript and pretty much inserts the rendered partial into the append function.

意见/评论/ _comment.html.erb

 <li> <%= @comment.description %> </li>

所以,我们现在已经清除了 #holdingDiv 并插入我们的意见。对于信息,也许是这样的:

So we've now cleared the #holdingDiv and inserted our comments. For information, maybe something like this:

projects_controller.rb

class ProjectsController < ApplicationController
  def index
    @project = Project.find params[:id]
    respond_to do |format|
      format.html
      format.js
    end
  end
end

意见/项目/ index.js.erb的

 $('#holderDiv').empty().append('<%= j render 'information', information: @project.information %>')

意见/项目/ _information.html.erb

<h2>
  <%= information.title %>
</h2>
<p>
  <%= infomration.details %>
</p>

那么,你的远程链接将是这样的:

Then, your remote links would be something like:

= link_to("Information", @project, :remote => true)
= link_to("Comments", project_comments_url(@project), :remote => true)

我要做出关于你的数据结构进行了一些假设。让我知道我让你感到困惑。

I had to make some assumptions about what your data structures were. Let me know where I've confused you.

另外,我相信我有一些拼写错误,后悔的。我没有测试,只是去了我的头顶。

Also, I am sure I have some typos, sorry for that. I did not test this, just went off the top of my head.

这篇关于轨道/ AJAX部分呈现的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆