EmberJS 如何传给 Ember 组件数组参数

dongli1985 · 2015年12月05日 · 最后由 aidewoode 回复于 2015年12月05日 · 1914 次阅读

刚开始接触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中使用navItemssubnavItems

...
  <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>
...

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

共收到 3 条回复

需要给 navItems 和 subnavItems 传入 properties。不能是原生的 js 对象

#1楼 @aidewoode 能否再详细一点吗?应该看那一块呢?十分感谢!

@dongli1985

比如说你有一个 applicationController, 然后你在 application 的 template , 比如 application.hbs 里面用了这个 {{nav-bar}} 这个 component , 你就可以在 applicationController 里面定义一个 navItems 的 property ,里面就是你的数据, 然后你就可以把这个 property 传给 这个 component。

export default Ember.Controller.extend({
  navItmes:  [{ name: '主要特性', link: '#' }, { name: '关于我们', link: '#' }]
})
{{ nav-bar navItems=navItmes }}

当然我这个做法不怎么好,不推荐用 controller 来传这些东西。这里只是为了演示。 你可以通过其他的方式 传入 property,比如通过其他的 component,这依你的情况来定了,反正传入 property 就行了。

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册