如何将数组属性传递给 Ember 组件？

Question

我的 Ember 组件如下所示：

import Ember from 'ember';

export default Ember.Component.extend({
  users: undefined,
  primaryAction: 'follow',
  leftSubDetails:  [],
  rightSubDetails:  [],

  onInitialization: function(){
    console.log('this', this);
    console.log('right',this.rightSubDetails);
    console.log('rightdetail', this.get('rightSubDetails'));
  }.on("init")
});

组件是这样调用的：

{{#view-users
  users=model
  primaryAction='follow'
  leftSubDetails=['tweets', 'followers', 'following']
  rightSubDetails=['follow', 'reply', 'addList']
}}
{{/view-users}}

看起来没有打印任何内容，我也无法在视图中使用任何内容。有什么问题吗？

Answer 1

如果您在控制器上将其声明为属性，它就会起作用，如：

App.IndexController = Ember.ArrayController.extend({
  details: ['follow', 'reply', 'addList']
});

然后：

{{#view-users
    users=model
    primaryAction='follow'
    leftSubDetails=['tweets', 'followers', 'following']
    rightSubDetails=details
}}
{{/view-users}}

上面的结果leftSubDetails 不工作。它将导致 undefined.

工作演示here

Answer 2

您还可以向组件传递一个 JSON 字符串，然后在您的逻辑中使用 JSON.parse()。有点作弊但阻止添加额外的逻辑

{{#view-users
     users=model
     primaryAction='follow'
     leftSubDetails='["tweets", "followers", "following"]'
     rightSubDetails='["follow", "reply", "addList"]'
}}
{{/view-users}}

Answer 3

或者您可以查看 ember-composable-helpers

{{#view-users
  users=model
  primaryAction='follow'
  leftSubDetails=(w 'tweets' 'followers' 'following')
  rightSubDetails=(w 'follow' 'reply' 'addList')
}}
{{/view-users}}

Answer 4

使用插件ember-composable-helpers

ember-composable-helpers 有一个 array 定义（还有很多其他的！）。查看文档：https://github.com/DockYard/ember-composable-helpers#array

自定义助手

您还可以通过 .hbs 文件定义用于创建的通用帮助程序。运行命令

$ ember g helper arr

然后 hbs 调用将是：

{{#view-users
  users=model
  primaryAction='follow'
  leftSubDetails=(arr 'tweets' 'followers' 'following')
  rightSubDetails=(arr 'follow' 'reply' 'addList')
}}
{{/view-users}}

参考：Define array inside template for handlebars/ember?

如何将数组属性传递给 Ember 组件？

How can I pass an array property to an Ember component?

ember.js

ember-data

ember-cli

使用插件ember-composable-helpers

自定义助手

如何将数组 属性 传递给 Ember 组件？

How can I pass an array property to an Ember component?

ember.js

ember-data

ember-cli

使用插件ember-composable-helpers

自定义助手

如何将数组属性传递给 Ember 组件？