Question

在我的Ember应用程序中，我正在迭代一组模型并为每个模型渲染一个组件：

{{#each}}
  {{content-box provider=provider type=type author=author link=link createdDate=created_date media=media summary=summary text=text title=title thumbnails=thumbnails}}
{{else}}
  No results :(
{{/each}}

如您所见，此映射中存在大量冗余。有没有办法一次映射所有属性？

我应该使用视图吗？在使用视图与组件时，我仍然很困惑。我已经阅读了几篇关于这方面的文章，我觉得我应该在需要可重用性时使用组件，这似乎就在这里。

Answer 1

无法使用单个属性传递所有这些参数。拥有如此多的参数实际上是一种难闻的气味，重构并从组件中取出所有对其功能而言不是必不可少的。

说你有：

<script type="text/x-handlebars" data-template-name="components/my-component">
    label 1 {{attribute1}}
    label 2 {{attribute2}}
    label N {{attributeN}}
    <button {{action "gotClicked" some_id}}>Click Me!</button>
</script>

实际上，您必须将几个属性传递给组件，从1到N和some_id，正是您正在做的事情。

问题在于，组件被设计为可以插入多个位置的通用代码片段。考虑到这一点，重构并取出（附件）数据，其唯一目的是由用户阅读/看到。

类似的东西：

<script type="text/x-handlebars" data-template-name="some-view">
    {{#each}}
        label 1 {{attribute1}}
        label 2 {{attribute2}}
        label N {{attributeN}}
        {{my-component some_id=some_id}}
    {{/each}}
</script>

<script type="text/x-handlebars" data-template-name="components/my-component">
    <button {{action "gotClicked" some_id}}>Click Me!</button>
</script>

Answer 2

可以轻松地将所有这些参数作为单个对象传递到{{#each}}助手中。在您的视图模板中：

{{#each}}
  {{content-box content=this}}
{{/each}}

并且，在您的组件模板中：

{{#with content}}
  Provider: {{provider}}
  Type: {{type}}
{{/with}}

这是working JSBin。

仅供参考，您可以根据需要为内容属性命名。 {{with}}帮助程序是可选的，但意味着您将{{content.provider}}缩短为{{provider}}。

如何将组件的属性映射到模型？

2 个答案: