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列的网格）。

    protected async override void OnNavigatedTo(NavigationEventArgs e)
    {

        string result = await WCFRESTServiceCall("GET", "getbg1?Email=" +   
                                                    emailtxtbox.Text + "");
        result = result.Replace("{\"getbg1Result\":", "");
        result = result.Replace("]}", "]");
        List<BG> data = JsonConvert.DeserializeObject<List<BG>>(result);
        int item1 = 0;
        int item2 = 1;
        int item3 = 2;
        int item4 = 0;

        item1 =int.Parse( data[0].Measurement);
        item2 = int.Parse(data[1].Measurement);
        item3 = int.Parse(data[2].Measurement);


        List<Tuple<string, int>> myList = new List<Tuple<string, int>>()
        {


            new Tuple<string, int>(data[0].Date_, item1),
            new Tuple<string, int>(data[1].Date_, item2),
            new Tuple<string, int>(data[2].Date_, item3),            
        };

        (MyChart.Series[0] as LineSeries).ItemsSource = myList;



    }

我猜你可以用Bootstrap做同样的事情。关键是#each出现在确定列宽的div之外，即col-sm-3，col-md-3等，这样你就可以重复33.33％宽度的列3三次，例如，在自动生成下一行之前。

Handlebars.js网格与数据

1 个答案: