How to create a directory-like structure with meteor templates?

Question

Consider this mockup of my intended output:

The data structure behind this in a Mongo DB looks like this - I did not nest the subcategories inside the document because I still want to be able to update subdocuments atomically - and I also want to allow a dynamic amount of layers below. From what I've seen, Mongo currently does not allow for easy, dynamic access of nested documents.

topmost_category = {
  _id : "foo",
  category_name : "Example",
  parent_category: null,
  subcatories: [ "sub_foo1", "sub_foo2", ... ]
}

child_category = {
  _id = "sub_foo1",
  category_name : "Example 2",
  parent_category: "foo",
  subcategories: []
}

The underlying HTML consists simply of nested -branches. The currently selected category gets an "active" class, and the icons in front are named "icon-folder-close" and "icon-folder-open" (<i class="icon-folder-close"></i>).

Now, I could use the answer to this to create a complete tree-like structure. However, all the branches would be "open". How do I make it so that only the currently selected branch is visible like shown in my mockup (and still have it reactive to boot)?

Answer 1

You can see the implementation of a very similar approach to that described by Hubert here:

http://www.meteorpedia.com/read/Trees

It's the code to the (working) category browser functionality of the wiki (you can see a demo there).

The main difference to Hubert's answer is that it uses a publish/subscribe with a session variable to fetch the data of opened children in real time.

Answer 2

The easiest way would be to add a boolean flag for branches denoting whether or not they belong to current path, and therefore should be open.

 

<template name="branch">

    {{#if open}}
        <div class="openBranch">
            ...
            {{#each children}}
                ...
            {{/each
        </div>
    {{else}}
        <div class="closedBranch">
            ...
        </div>
    {{/if}}

</template>

 

Now, the setting and management of this flag depends on the logic of your application. Where do you store the currently selected branch?

 

I assume the state is limited to a single client. In this case, one solution is to:

• maintain an array of opened branches ids, scoped to a single file,
• implement the open flag as a helper:

 

Template.branch.open = function() {
    return _.indexOf(openedBranches, this._id) !== -1;
}

 

• when user changes selection, clear the array and populate it with path from the selected branch to the top.