Ember left nav creation

I need to create a left nav in ember that functions very much like the left nav on the ember website. I am currently on Ember 1.X which has poor serialization support for nested JSON. I started off with this data model which I do not believe will work with Ember 1.X:

var menuItems = [{
  id: 1,
  title: 'Payroll',
  children: { 
        'Child 1',
        'Child 2'
    }
  },{
    id: 2,
    title: 'Time & Attendance',
    children: { 
        'Child 1',
        'Child 2',
        'child 3'
    }
}];

I have my menu template.js built like this (*untested):

<div class="container-fluid">
  <div class="row">
    <div class="col-md-2">
        <ul class="navMenu nav list-unstyled">
          {{#each model as |menuItem|}}
            {{#if isActive}}
              <span {{action "makeInactive"}} class="">{{menuItem.title}}</span>
              <ul>
                {{#each child as |children|}}
                  <li><a href="#">{{child}}</a></li>
                {{/each}}
              </ul>
            {{else}}
              <span {{action "makeActive"}} class="">{{menuItem.title}}</span>
            {{/if}}
          {{/each}}
        </ul>
    </div>
    <div class="col-md-10">Will be content</div>
  </div>
</div>

This will sort of work, but I'll need some way to ensure only 1 element is active at a time.

Do I need to update to ember 2.X to do something like this?