1

在我的 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}}

如您所见，此映射中有很多冗余。有没有办法一次映射所有属性？

我应该使用视图吗？我仍然很困惑何时使用视图与组件。我已经阅读了几篇关于此的文章，我的印象是，当我想要可重用性时，我应该使用一个组件，这似乎就在这里。

4

2 回答 2

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>

实际上，您必须将几个属性从1toN和传递给组件，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>
于 2014-07-02T00:18:38.993 回答
1

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

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

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

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

这是一个有效的 JSBin。

仅供参考，您可以随意命名内容属性。{{with}}助手是可选的，但意味着您缩短{{content.provider}}为{{provider}}.

于 2014-07-03T03:26:54.183 回答