如何将视图代码提取到Volt中的Component

Question

我正在尝试将一些重复的视图内容提取到组件中，与rails部分类似。

我想要这个：

{{ activity.each do |activity| }}
    <div class="{{ activity.style_class }}>
       {{ activity.text }}
    </div>
{{ end }}

成为这个：

{{ activity.each do |activity| }}
    <:activity>
{{ end }}

但每当我尝试将观看代码移至app/activity/views/main/index.html时 我收到有关活动不存在的错误。

Answer 1

诀窍是在调用组件时传递model：

// app/main/views/main/index.html

{{ activity.each do |activity| }}
    <:activity model="{{ activity }}">
{{ end }}

然后在你的组件中，你可以像这样将它放在自己的范围内：

// app/activity/views/main/index.html

<div class="{{ style_class }}>
  {{ text }}
</div>