javascript - 带有数据的 Handlebars.js 网格

Question

我正在使用 Parse.com 从我的服务器中提取数据并将其显示在 handlebars.js 模板中。

<script id="blogs-tpl" type="text/x-handlebars-template">
  {{#each blog}}

  <div class="blog-post">
    <p class="blog-post-meta"><a href="#"><img src="{{image.url}}"></a></p>
    <h5 id="productTitle" class="blog-post-title">{{productType}}</h5>
    <div>${{price}} USD</div>
    <div><span class="typcn typcn-heart" style="color: red; font-size: 20px;"></span> {{likesCount}}</div>
    <a href="" id="download-button" class="btn-large waves-effect waves-light indigo darken-2">Details</a>
  </div>


  {{/each}}
</script>

这是与API通信的js:

var Blog = Parse.Object.extend("Blog");

var Blogs = Parse.Collection.extend({
    model: Blog
});

var blogs = new Blogs();

blogs.fetch({
    success: function(blogs) {
        var blogsView = new BlogsView({ collection: blogs });
        blogsView.render();
        $('.main-container').html(blogsView.el);
    },
    error: function(blogs, error) {
        console.log(error);
    }
});

var BlogsView =  Parse.View.extend({
    template: Handlebars.compile($('#blogs-tpl').html()),
    render: function(){ 
        var collection = { blog: this.collection.toJSON() };
        this.$el.html(this.template(collection));
    }
});

如何在 5xn(5 列)网格中显示它？

Answer 1

呵呵。经过一些实验后弄明白了，所以这是我的答案。鉴于我使用的是 Materialize 框架，我可以只使用 m3 类来设置列的宽度(并获得 4 列的网格)。

<script id="blogs-tpl" type="text/x-handlebars-template">

  <div class="blog-post">
    {{#each blog}}
    <div class="col s12 m3" style="overflow: hidden;">
      <div class="icon-block">
        <h2 class="center light-blue-text"></h2>

        <p class="blog-post-meta"><a href="#"><img style="width: 100%; height: auto;" src="{{image.url}}"></a></p>
        <h5 id="productTitle" class="blog-post-title">{{productType}}</h5>
        <div>${{price}} USD</div>
        <div><span class="typcn typcn-heart" style="color: red; font-size: 20px;"></span> {{likesCount}}</div>
        <a href="" id="download-button" class="btn-large waves-effect waves-light indigo darken-2">Details</a>

      </div>
    </div>

    {{/each}}
  </div>

</script>

我猜你可以用 Bootstrap 做同样的事情。关键是 #each 出现在确定列宽的 div 之外，即 col-sm-3、col-md-3 等，因此您要重复 33.33% 宽度的第 3 列，例如, 在自动生成下一行之前。