在Rails3动态表单字段使用jQuery [英] Dynamic form fields in Rails3 with jquery
问题描述
我使用rialscasts#74为指导。
I am using rialscasts #74 as a guide.
我想动态通过文本链接添加表单域。在railscast情节,他实现了它非常漂亮,使用下面的code:
I am trying to dynamically add form fields via a text-link. In the railscast episode he achieves it very nicely using the following code:
<!-- layouts/application.rhtml -->
<%= javascript_include_tag :defaults %>
<!-- projects/new.rhtml -->
<div id="tasks">
<%= render :partial => 'task', :collection => @project.tasks %>
</div>
<p><%= add_task_link "Add a task" %></p>
<!-- projects/_task.rhtml -->
<div class="task">
<% fields_for "project[task_attributes][]", task do |task_form| %>
<p>
Task: <%= task_form.text_field :name %>
<%= link_to_function "remove", "$(this).up('.task').remove()" %>
</p>
<% end %>
</div>
# projects_helper.rb
def add_task_link(name)
link_to_function name do |page|
page.insert_html :bottom, :tasks, :partial => 'task', :object => Task.new
end
end
在projects_help.rb内容是我最感兴趣的是什么,但问题是,他是通过样机这样做。我要寻找一个确切的重复执行使用jQuery(和rails3)。你怎么看?谢谢!
content within projects_help.rb is what I am most interested in. The problem is he is doing this via prototype. I am looking for an exact duplicate implementation using jquery (and rails3). What do you think? Thanks!
推荐答案
雅我要说 - 这是一个非常古老的railscast并同时使用过时的做法和旧的框架。我会尽力帮助你。
ya I was going to say -- that is a very old railscast and is using both outdated practices and an old framework. I'm gonna try to help you out.
布局/ application.erb
layouts/application.erb
<%= javascript_include_tag :defaults %>
项目/ new.erb
projects/new.erb
<div id="tasks">
<%= render :partial => 'task', :collection => @project.tasks %>
</div>
<p><%= add_task_link "Add a task" %></p>
项目/ _task.erb
projects/_task.erb
<div class="task">
<!-- I think this part should still work -->
<%= fields_for "project[task_attributes][]", task do |task_form| %>
<p>
Task: <%= task_form.text_field :name %>
<!-- We're going to be defining the click behavior with unobtrusive jQuery -->
<%= link_to "remove", "#", :class => 'remove_task'
</p>
<% end %>
</div>
projects_helper.rb
projects_helper.rb
def add_task_link(name)
# This is a trick I picked up... if you don't feel like installing a
# javascript templating engine, or something like Jammit, but still want
# to render more than very simple html using JS, you can render a partial
# into one of the data-attributes on the element.
#
# Using Jammit's JST abilities may be worthwhile if it's something you do
# frequently though.
link_to name, "#", "data-partial" => h(render(:partial => 'task', :object => Task.new)), :class => 'add_task'
end
公共/ Java脚本/ application.js中
public/javascripts/application.js
$(function(){
// Binds to the remove task link...
$('.remove_task').live('click', function(e){
e.preventDefault();
$(this).parents('.task').remove();
});
// Add task link, note that the content we're appending
// to the tasks list comes straight out of the data-partial
// attribute that we defined in the link itself.
$('.add_task').live('click', function(e){
e.preventDefault();
$('#tasks').append($(this).data('partial'));
});
});
这篇关于在Rails3动态表单字段使用jQuery的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!