Question

<template name="userPill">
    <span>{{Zipcode}}</span>
    <span>{{City}}</span>
</template>

以上模板用于流星自动完成。我需要的是列表周围的容器上的垂直滚动条，因此用户可以滚动这些值。非常感谢任何帮助。

由于

Answer 1

DOM中不存在template标记，因此您不能依赖它来获取CSS。如果您需要专门定位该模板（而不是向其元素添加泛型类），最好的办法是将其内容包装在div中：

<template name="userPill">
  <div class="user-pill">
    <span>{{Zipcode}}</span>
    <span>{{City}}</span>
  </div>
</template>

然后你可以在你的css中定位它：

.user-pill {
  color: red;
}

在较大的项目中，我更喜欢使用双下划线来标识模板的类名，例如<div class="__user-pill">。它可能看起来有点难看，但我发现弄清楚发生了什么真的很有帮助。

根据您的评论，您似乎需要为userPill的容器设置样式。假设你有一个这样的模板：

<template name="userPillContainer">
  <div class="user-pill-container">
    {{> userPill name="home"}}
    {{> userPill name="about"}}
    {{> userPill name="profile"}}
  </div>
</template>

然后您可以按照与上面相同的方式定位容器：

.user-pill-container {
  border: 1px solid black;
}

如何将css样式应用于流星中的模板

1 个答案: