Question

我有以下项目模型：

 {
  the_yearId: "2009",
  title:  "First 2009 Project",
  className: "header",
  id: "null",
  images: [
           {
              title: "first-2009-project-image1.png",
              caption: "about first 2009 project image 1"
            },
           {
              title: "second-2009-project-image2.png",
              caption: "about first 2009 project image 2"
            }

          ]
}

{
      the_yearId: "2009",
      title:  "Second 2009 Project",
      className: "leftColumn",
      id: "null",
      images: [
               {
                title: "second-2009-project-image1.png",
                caption: "about second 2009 project image 1"
               },
               {
                title: "second-2009-project-image2.png",
                caption: "about second 2009 project image 2"
                }

               ]
    }
{
          the_yearId: "2009",
          title:  "Third 2009 Project",
          className: "rightColumn",
          id: "null",
          images: [
                   {
                    title: "third-2009-project-image1.png",
                    caption: "about third 2009 project image 1"
                   },
                   {
                    title: "third-2009-project-image2.png",
                    caption: "about third 2009 project image 2"
                    }

                   ]
        }
{
  the_yearId: "2010",
  title:  "First 2010 Project",
  images: [
           {
              title: "first-2010-project-image1.png",
              caption: "about first 2010 project image 1"
            },
           {
              title: "second-2010-project-image2.png",
              caption: "about first 2010 project image 2"
            }

          ]
}

此模式在2012年之前的其他年份重复进行。当客户点击年份时，匹配the_yearId的模型将被放入Backbone.Collection中，然后将其传递给视图，并且正确模板。很直接。

我使用handlebars.js作为模板，并且把手代码的副本如下：

{{title}}
{{#each images}}
{{this.title}}
{{this.caption}}
{{/each}}

这可以预测地循环遍历集合中的每个模型并正确填充。如果我每次迭代都添加HTML结构和CSS样式，则样式将相同。

有没有办法对页面的每个部分进行不同的设置？例如，如果集合包含4个模型，我如何设置把手模板的样式以将第一个模型放置在具有100％宽度的标题中，将第二个和第三个模型放置在另一个部分中，每个模型的样式为50％宽度。第四个模型将被设计为100％宽度的页脚。

一旦将类放入DOM中，jQuery是否可以动态地将类分配给模型？还有更好的方法吗？

修改我想这样做：

<!-- if model.className == "header" -->
<section id="single-column">
   <article>
      <header>First 2009 Project</header>
      <img src="first-2009-project-image1.png"></img>
   </article>
</section>

<section id="two-column">
   <!-- if model.className == "leftColumn" --> 
   <article>
      <header>Second 2009 Project</header>
      <img src="second-2009-project-image1.png">
   </article>
<!-- if model.className == "rightColumn" -->
   <article>
      <header>Third 2009 Project</header>
      <img src="third-2009-project-image1.png">
   </article>
</section>

<footer>
<!-- if model.className == "footer" -->
  <header>Fourth 2009 Project</header>
  <img src="fourth-2009-project-image1.png">
</footer>

Answer 1

您可以使用三个单独的模板：

<script id="top" type="text/x-handlebars">
    <section class="single-column">
       ...
    </section>
</script>
<script id="middle" type="text/x-handlebars">
    <section class="two-column">
        ...
    </section>
</script>
<script id="bottom" type="text/x-handlebars">
    <footer class="single-column">
        ...
    </footer>
</script>

和一些CSS：

.two-column {
    width: 50%;
    ...
}
.single-column {
    width: 100%;
    ...
}

整理宽度。请注意切换到样式的类属性，以避免可能的重复id。然后在JavaScript中将数组分成三部分：

var top    = images.shift();
var bottom = images.pop();
// the middle is left in images.

演示：http://jsfiddle.net/ambiguous/F3Acm/1/

您也可以使用相同的技术，但将所有内容都保存在一个模板中：

<script id="t" type="text/x-handlebars">
    <section class="single-column">
       <!-- do things with {{top}} in here -->
    </section>
    <section class="two-column">
        <!-- do things with {{middle}} in here -->
    </section>
    <footer class="single-column">
        <!-- do things with {{bottom}} in here -->
    </footer>
</script>

然后处理编译后的模板三个变量：

var t = Handlebars.compile($('#t').html());
var h = t({
    top:    top,
    middle: images,
    bottom: bottom
});

演示：http://jsfiddle.net/ambiguous/yD7wF/

您也可以使用partials。这四个模板看起来像：

然后注册部分并填写模板：

Handlebars.registerPartial('top',    $('#top').html());
Handlebars.registerPartial('middle', $('#middle').html());
Handlebars.registerPartial('bottom', $('#top').html());
var t = Handlebars.compile($('#t').html());
var h = t({
    top:    first,
    middle: images,
    bottom: last
}));

演示：http://jsfiddle.net/ambiguous/LLqY9/

您使用哪种方法取决于哪种方法最适合您的情况。

是否可以设置handlebars.js / moustache.js模板的不同部分的样式？

1 个答案: