刚开始接触 Ember，甚至是 JS，因此问的问题可能比较白，请见谅~ 我在 Ember 应用中创建了一个nav-bar组件，需要在调用时传入菜单条目，我目前是这样设计的：

{{nav-bar
  navItems=[
    { name: '主要特性', link: '#' },
    { name: '关于我们', link: '#' }
  ]
  subnavItems=[
    { name: '合作条款', link: '#' },
    { name: '联系我们', link: '#' }
  ]}}

但是这俩参数在 hbs 文件中确是undefined。请问正确的做法是什么呢？

更新

根据@aidewoode的回答，不能直接传递 JS 对象（就是数组）到 Ember 的组件中，只能传递字符串，因此我目前的做法是：

{{nav-bar
  navItems='[{ "name": "主要特性", "link": "#" }, { "name": "关于我们", "link": "#" }]'
  subnavItems='[{ "name": "使用条款", "link": "#" }, { "name": "联系我们", "link": "#" }]'}}

然后修改app/components/nav-bar.js：

import Ember from 'ember';

export default Ember.Component.extend({
  navItems: [],
  subnavItems: [],
  onInitialization: function() {                                // 
    this.set('navItems', JSON.parse(this.navItems));            //  增加的内容
    this.set('subnavItems', JSON.parse(this.subnavItems));      //
  }.on('init')                                                  //
});

最后在app/templates/components/nav-bar.hbs中使用navItems和subnavItems：

...
  <div class="collapse navbar-collapse">
    <!-- 右侧菜单 -->
    <ul class="nav pull-right">
      {{#each navItems as |item|}}
        <li><a href="{{item.link}}">{{item.name}}</a></li>
      {{/each}}
    </ul>
    <!-- 底部菜单 -->
    <ul class="subnav">
      {{#each subnavItems as |item|}}
        <li><a href="{{item.link}}">{{item.name}}</a></li>
      {{/each}}
    </ul>
  </div>
...

欢迎给出更好的解决方法！