ember 组件的动态参数

Question

我正在处理一个 Ember 项目，我必须在其中动态指定组件的参数。

我在 .js 控制器中有以下数组：

componentParams: ["id", "name"]

我想做的是获取数组中的值，并像这样在把手中使用它们作为组件参数

{{component-name id=somevalue name="somevalue"}}

这可以做到吗？

Answer 1

我使用的方法。

controller.js

navbarParams: {
   titleToShow: 'General.ResearchProjects',
   glyphicon: 'glyphicon glyphicon-globe',
   infoText: 'information/project'
},

template.hbs

{{my-navbar params=navbarParams}}

我的-navbar.hbs

<h1> {{params.titleToShow}} <span class={{params.glyphicon}}> </span> </h1>

如果你的参数是queryParams

应该这样定义

queryParams: ['foo', 'bar',],
foo: null,
bar: null

{{my-navbar first=foo second=bar}}

Answer 2

老实说，这取决于，如果您坚持使用该数组 - 您可以使用计算属性来提取正确的数组值。（这可能不被推荐 - 更好的方法是将您的 componentParams 格式化为一个对象（如@kristjan 的示例）。

如果你被数组困住了——而且位置永远不会改变（id 将永远是 componentParams[0] & name 将永远是 componentParams[1]，你可以尝试这样的事情 ::

// controller
import Ember from 'ember';

const {
  Controller,
  computed,
  get
} = Ember;

export default Controller.extend({
  componentParams: ['id', 'name'],
    componentName: computed('componentParams', {
    get() {
        return get(this, 'componentParams')[1];
    }
  }),
  componentId: computed('componentParams', {
    get() {
        return get(this, 'componentParams')[0]; 
    }
  })
});


// template
{{my-component name=componentName id=componentId}}

// component/template
name:: {{name}}
<br>
id :: {{id}}

check out this twiddle for a working example

这有帮助吗？？

ember 组件的动态参数

dynamic params for ember component

javascript

handlebars.js

ember.js