views:

798

answers:

3

Hi All,

As much amazing info as is out there, it often seems to fall just short of my demented requirements. That said, I'm looking for a mechanism by which to handle multiple nested models on a single page.

Now, I've seen all the videos and posts (not really, but humor me) on nesting two models (Railscasts, etc.). However, I need to deal with models nested 4 deep, all the while using Javascript to keep the page clean.

Basically I have Site -> Buildings -> Controllers -> Measurements and would like to manage (CRUD) a complete site on a single page. I'm sure it's possible, but I have yet to see a reasonably clean method around which I can wrap my head. If anyone has any input, I'm all ears (or eyes as the case may be).

Thanks in advance.

A: 

I think the simplest way would be to break it down in parent->child pairs:

  • Site->Building
  • Building->Controller
  • Controller->Measurement

Then you have a simple relationship between all 4.

cloudhead
Yup, I've got the relationships down. That's not an issue, but thx.
humble_coder
I have no problem managing them on a per-page basis that way, I'm simply looking for a way to display all of those pages via javascript, etc in an intuitive manner. I'd hate to have someone go to 4 or 5 different pages in order to manage a single Site. Ya know?
humble_coder
+1  A: 

Check out http://activescaffold.com/ and Streamlined -- http://streamlinedframework.org/ both support nested models on a page.

Note that you probably need some training for your users. A 4 level deep model is not something that people run into every day.

Larry K
+1 for ActiveScaffold. For a newspaper website, I've done Issue -> Section -> Article -> Image in nested scaffolding.
zenazn
Yeah, I actually used the 'streamlined' framework quite a bit when it debuted. I'm really looking to understand what's occurring though. As for the users, I'm not sure they'll care as it will be represented in a visually intuitive manner (functionally no different than choosing from consecutive drop-boxes in order to select the next drop-box).Thanks for the post.
humble_coder
+1  A: 

Some skilled programmers recommend only nesting resources 1 level deep. Certainly your domain can be more complex, but you shouldn't expose all of that complexity in a single view. If you really need to manage an entire Site on a single page, I recommend you use multiple forms and update the various displays via AJAX, rather than trying to do it all in one form. You'll have better usability and cleaner code.

EDITED

Okay, here's a sample view in 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"

And the next level, Measurements, will look pretty much the same.

As far as getting the AJAX rocking, in jQuery you say:

$( 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;
  } );

});

This allows each form to post and updates its updateable block with a new version from the server once a post has occurred. You can get fancier and use the metadata plugin to store info on which block should be updated and other info about the request, but this is simple and allows you to see the configuration in your html. data-x attributes are a scheduled feature of HTML5, but we can go ahead and use them anyway.

By creating a convention for your remote forms, it's easy to make jQuery handle all your ajax posts with a small amount of code. You'll probably want some fancier stuff, spinners, validations, etc. There's room for that, but this will get you started with a single page interface.

austinfromboston
That's *exactly* what I'm interested in doing. I'm simply having trouble wrapping my head around the concept of AJAX controlling AJAX controlling AJAX. I suppose all "forms" will be independent but it seems a bit monolithic (albeit "necessary" for this particular project).More important, I need to figure out some quality view management and partial creation. I suppose I'll start from the end and work my way back. If you have any thoughts on implementation, I'm all ears. Thanks.
humble_coder
Excellent! I'll give that a go. Much appreciated. Question: Is "Controller" a reserved word? I can't find it anywhere.
humble_coder
In the view, "controller" is an attribute of ActionView::Base, which refers back to the Controller for the current request. Controller may not be a reserved word, but it is heavily used as part of Rails' naming conventions, which affect how dependencies are loaded and cached. I'd recommend consulting a thesaurus for an appropriate alternative.
austinfromboston
So this code you presented *appears* to be for "display only". I've been reading, but I can't seem to figure out the "NEW" and "EDIT" actions for each section. I suppose I'm really trying to recreate some of the functionality of "active_scaffold". However, rather than trying to read through all of their code, I've been taking blind shots. Oh well, to the code I suppose......in the meantime if you have any input as far as NEW and EDIT activity, I'm all ears. Thanks for all your help thus far.
humble_coder
All the forms referenced above are assumed to be edit forms. You're going to have to be a bit creative to make a pattern like this work for new nested models, but it's definitely possible. I'm afraid your comment isn't clear to me -- what are you expecting to see in an EDIT view?
austinfromboston