Partial Recursion and Performance

In an attempt to make a hiearchical menu structured from JSON data with an unknown depth, I tried creating a partial that referenced itself. I hadn’t seen it documented so I wasn’t expecting anything to happen. To my surprise, it worked.

Here’s an example of what I did: http://jsbin.com/olEDivI/3/edit

The only problem is, I noticed that performance tanks in some browsers. For example, in Safari, the first time going to this example seems to take a while to display. On some occassions it doesn’t do anything. In certain older versions of Chrome, it would take over a minute to display the list.

I really like being able to use partials this way. My concern is that performance issues won’t allow me to use this in production.

I’ve built a few nested templates…and I ran into the same performance issues that you’re running into.

In my case, I didn’t need to show the entire node tree when the page first loaded…each level was, by default, collapsed which sped up the rendering performance (it’s rendering much less after all!). I did this by including a isCollapsed property on the itemController …then, the template would look like:

<ul>
  <li>
    <label {{action "toggleIsCollapsed"}}>{{title}}</label>
    {{#unless isCollapsed}}
      {{#each children itemController="child"}}
        {{partial "node"}}
      {{/each}}
    {{/unless}}
  </li>
</ul>

…and corresponding controller:

App.ChildController = Ember.ObjectController.extend({
  isCollapsed : true,
  actions : {
    toggleIsCollapsed : function() {
      this.toggleProperty("isCollapsed");
    }
  }
});

Hope this helps.

That’s not a bad idea. I appreciate the feedback.

just a note:

2 things that are easily improved in the above jsbin is.

  1. use ember.prod.js as it does not contain the many development assertions
  2. templates are not pre-compiled, so they are compiled on each run of the jsbin.

If you can correct the above 2, this will be a much better test scenario for us to improve.