一些熟练的程序员建议只将资源嵌套 1 级深度。当然,您的域可以更复杂,但您不应该在一个视图中暴露所有这些复杂性。如果您确实需要在单个页面上管理整个站点,我建议您使用多个表单并通过 AJAX 更新各种显示,而不是尝试在一个表单中完成所有操作。您将拥有更好的可用性和更简洁的代码。
已编辑
好的,这是 HAML 中的示例视图:
%h1 Editing Site
#site-form
- form_for @site, :class => 'remote', :'data-update' => '#site-form' do |f|
%p
= f.label :name
= f.text_field :name
%p
[All the other fields on your Site model]
%p
= f.submit "Save Site"
%h2
Buildings for
= @site.name
#buildings-forms
- for building in @site.buildings
%div{ :id => "building-#{building.id}" }
- form_for building, :class => 'remote', :'data-update' => "#building-#{building.id}" do |f|
%p
= f.label :name
= f.text_field :name
%p
[All other building fields]
%p
= f.submit "Save Building"
%h3
Controllers for
= building.name
- for cntroller in building.controllers
%div{ :id => "controller-#{cntroller.id}"}
- form_for cntroller, :class => 'remote', :'data-update' => "#controller-#{cntroller.id}" do |f|
%p
= f.label :name
= f.text_field :name
%p
[All other controller fields]
%p
= f.submit "Save Controller"
下一个级别,测量,看起来几乎相同。
至于让 AJAX 摇摆不定,在 jQuery 中你说:
$( function() {
$('form.remote').submit( function() {
var submitted_form = this;
$.post( this.action, $.serialize(this), function( data_returned, status, request ) {
var updated_block = $( data_returned ).find( $(submitted_form).attr('data-update').html();
$( $(submitted_form).attr('data-update') ).html( updated_block );
} );
return false;
} );
});
这允许每个表单发布并在发布后使用来自服务器的新版本更新其可更新块。您可以更高级地使用元数据插件来存储有关应更新哪个块的信息以及有关请求的其他信息,但这很简单,并且允许您在 html 中查看配置。data-x 属性是 HTML5 的预定功能,但我们可以继续使用它们。
通过为您的远程表单创建一个约定,很容易让 jQuery 用少量代码处理您所有的 ajax 帖子。您可能需要一些更高级的东西、微调器、验证等。还有空间,但这将使您开始使用单页界面。