{"id":289,"date":"2012-08-28T15:32:17","date_gmt":"2012-08-28T15:32:17","guid":{"rendered":"http:\/\/nicholshayes.co.uk\/blog\/?p=289"},"modified":"2013-10-31T15:56:11","modified_gmt":"2013-10-31T15:56:11","slug":"treedecorator","status":"publish","type":"post","link":"http:\/\/nicholshayes.co.uk\/blog\/?p=289","title":{"rendered":"TreeDecorator"},"content":{"rendered":"

On a couple of my projects, I’ve wanted a dynamic tree representation of a group of objects. acts_as_nested_set and it variants (such as awesome_nested_set) work well for creating the back-end structure. There are plenty of JavaScript libraries that will help you create a dynamic tree. I’ve used YUI 2 TreeView<\/a> in the past, and this time I wanted to use Dynatree<\/a>. <\/p>\n

What I find takes time is pulling the two together. Specifically, I like to output the items in an unordered list and then used the JavaScript library to rebuild the list as a dynamic tree. That way the list degrades nicely if there is a JavaScript issue. However, getting an acts_as_nested_set group into an nested ordered list is tiresome.<\/p>\n

So to prevent me having to reinvent the conversion of a nested set into a nested unordered list, I’ve created TreeDecorator<\/a>. It is installed into a rails app with:<\/p>\n

gem 'tree_decorator'<\/span><\/div><\/div>\n

With that in place I could create this helper method (My nested set object is Event):<\/p>\n

  def<\/span> events_in_unorder_list(<\/span>events)<\/span>
\n    hanger = TreeDecorator::ObjectHanger<\/span>.new<\/span>(<\/span>events)<\/span>
\n   
\n    hanger.outer<\/span> {<\/span>|<\/span>content|<\/span> content_tag(<\/span>'ul'<\/span>, content.html_safe<\/span>)<\/span>}<\/span>
\n    hanger.inner<\/span> {<\/span>|<\/span>content|<\/span> content_tag(<\/span>'li'<\/span>, content.html_safe<\/span>)<\/span>}<\/span>
\n    hanger.element<\/span> {<\/span>|<\/span>event|<\/span> link_to(<\/span>event.title<\/span>.html_safe<\/span>, event_path(<\/span>event)<\/span>)<\/span>}<\/span>
\n   
\n    hanger.tree<\/span>
\n  end<\/span><\/div><\/div>\n

That then gives me my nested ordered list, and it is then trivial to make it dynamic:<\/p>\n

<<\/span>div class<\/span>="events"<\/span>><\/span>
\n<%<\/span>= events_in_unorder_list(<\/span>@event_roots)<\/span> %><\/span>
\n<\/<\/span>div><\/span>
\n
\n<%<\/span>= javascript_tag(<\/span>'$(".events").dynatree({});'<\/span>)<\/span> %><\/span><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"

On a couple of my projects, I’ve wanted a dynamic tree representation of a group of objects. acts_as_nested_set and it variants (such as awesome_nested_set) work well for creating the back-end structure. There are plenty of JavaScript libraries that will help … Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[],"_links":{"self":[{"href":"http:\/\/nicholshayes.co.uk\/blog\/index.php?rest_route=\/wp\/v2\/posts\/289"}],"collection":[{"href":"http:\/\/nicholshayes.co.uk\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/nicholshayes.co.uk\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/nicholshayes.co.uk\/blog\/index.php?rest_route=\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"http:\/\/nicholshayes.co.uk\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=289"}],"version-history":[{"count":10,"href":"http:\/\/nicholshayes.co.uk\/blog\/index.php?rest_route=\/wp\/v2\/posts\/289\/revisions"}],"predecessor-version":[{"id":465,"href":"http:\/\/nicholshayes.co.uk\/blog\/index.php?rest_route=\/wp\/v2\/posts\/289\/revisions\/465"}],"wp:attachment":[{"href":"http:\/\/nicholshayes.co.uk\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=289"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/nicholshayes.co.uk\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=289"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/nicholshayes.co.uk\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=289"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}