Javascript CSS和动态内容

更新：搞乱了我的CSS，因为与动态内容无关。！ 不过，答案非常有用

我正在创建标签并使用把手插入内容：

车把代码：

{{#each docs}}
    <article class="first"> 
        <p class="date">
            {{@date}} {{date}} 
        </p>
        <h4 class="header">{{@venue.title}} {{venue.title}}
        - {{@venue.city}} {{venue.city}}</h4>
        <p class="details">
            {{@description}} {{description}}
        </p>
    </article>
{{/each}}

---

有没有办法先创建内容，然后应用CSS或其他更优雅的解决方案

CSS在每次重新绘制时自动应用。因此，将代码插入源html或使用js动态插入并不重要，css将正确应用

这个问题肯定来自您的代码，它有几个错误

首先是CSS

• 您想用class

  gig项设置每个
  div
  元素的样式，但是
  您的模板中没有
  div
  和class
  gig项目

• 您使用值

  n（n+2）

  定义一个属性

  article

  ，但这不是一个属性，而是一个选择器

您应该像这样使用它：

article:nth-of-type(n+2) {
  color: blue;
}

然后在车把模板中：

• 我假设您希望按名称插入值，但使用 前缀

  @

  为车把循环值保留，如

  @索引

  或

  @键

• 另一个错误是您编写了双把手 块以显示该值。一个就够了

插入值的正确方法是：

<p class="date">{{date}}</p>

{{date}

<p class="date">{{date}}</p>