File Navigator Guide (Advanced)

This guide walks you through building a file navigation widget. It takes about 45 minutes to complete. It was written with
CanJS 3.10. Check out the File Navigator Guide (Simple)
for an easier example that produces similar functionality.

Create the ROOT entity and render it

The problem

We need to begin converting the static HTML the designer gave us into live HTML. This means
rendering it in a template. We’ll start slow by rendering the root parent folder’s name
in the same way it’s expected by the designer.

Things to know

CanJS uses can-stache to render data in a template
and keep it live. Templates can be authored in <script> tags like:

Toggle children with a ViewModel

The problem

We want to hide the root folder’s children until the root folder is clicked on. An subsequent
clicks on the root folder’s name should toggle if the children are displayed.

Things to know

CanJS uses [guides/technicalViewModels#MaintainableMVVM ViewModels] to manage the behavior
of views. ViewModels can have their own state, such as if a folder isOpen and should be showing
its children. ViewModels are constructor functions created with can.DefineMap.

can.DefineMap can detail the type of a property with another type like:

{{#each(items)}}
<li>{{this.name}}</li> <!-- this is each item in items -->
{{/each}}

The solution

The following:

Changes the app-template to use the <a-folder> component to render the root folder. It
passes the root folder as folder to the <a-folder> component’s ViewModel. It also sets the
<a-folder> component’s ViewModel’s isOpen property to true.

Moves the content that was in app-template to the folder-template<script> tag.