Javascript 带有数据的handlebar.js网格
我正在使用Parse.com从服务器中提取数据,并将其显示在handlebar.js模板中Javascript 带有数据的handlebar.js网格,javascript,html,parse-platform,handlebars.js,Javascript,Html,Parse Platform,Handlebars.js,我正在使用Parse.com从服务器中提取数据,并将其显示在handlebar.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}}"></
<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>
如何在5xn(5列)网格中显示此内容?嘿。经过一些实验,我找到了答案。考虑到我使用的是Materialize框架,我可以使用m3类来设置列的宽度(并得到一个4列的网格)
{{{#每个博客}
{{productType}}
${{price}}美元
{{likecount}}
{{/每个}}
我想你也可以用Bootstrap做同样的事情。关键是#每个都出现在确定列宽的div之外,即col-sm-3、col-md-3等,因此在自动生成下一行之前,您将重复33.33%宽度的列3三次
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));
}
});
<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>