Question

骨干视图：

        var $ = require('jquery'),
        Handlebars = require('handlebars'),
        Backbone = require('backbone'),
        channel = require('../../templates/dashboard/channelstats.html'),
        channelstatsCollection = require('../../collections/dashboard/ChannelStatsCollection'),
        mainJs = require('../../libs/main');
var ChannelStatsView = Backbone.View.extend({
    el: "#divstatsview",
    initialize: function () {

        this.collection = new channelstatsCollection();

        var api_token = mainJs.get_api_token();

        this.collection.fetch(
                {
                    headers: {'Authorization': 'Bearer ' + api_token.access_token},
                    success: function (collection, response, options) {

                        var tpl = channel;

                        console.log(JSON.stringify(response));
$(this.el).html(tpl({orders:JSON.stringify(response)}));                         
                    }
                }
        );



    }

});
// Our module now returns our view
module.exports = ChannelStatsView;

把手模板：

   {{#orders.records}}

    {{#by_status}}

    <div class="col-lg-2 col-md-6 new-item centered white-panel">



        <h2 class="white-header">    {{PROCESSING}}</h2>

        <!--                  <div class="text-danger"><i class="fa fa-bell fa-3x"></i></div>-->
        <div class="clearfix"></div>
        <div>      <b>{{PROCESSING}} new </b>Orders</div>
        <div>   <b>{{SHIPPED}} </b3>Pending</div>


        <br/>
        <div><i class="fa fa-refresh fa-2x"></i></div>
        <a href="#" id="btnsync">Sync</a>


    </div>

    {{/by_status}}
    {{/orders.records}}

我的JSON：

 {
   "metadata":{
      "recordcount":1
   },
   "records":[
      {
         "count":0,
         "by_status":[
            {
               "OUTOFSTOCK":0
            },
            {
               "PROCESSING":19,
               "by_channel":[
                  {
                     "Some":1
                  },
                  {
                     "Some1":18
                  }
               ]
            },
            {
               "RECEIVED":0
            },
            {
               "SHIPPED":26,
               "by_channel":[
                  {
                     "Demo":26
                  }
               ]
            }
         ]
      }
   ]
}

我得到一个空白页面，没有任何显示。

注意：

我正在使用hbsfy为我编译模板，因此tpl是一个已编译的模板，而不是一个html文件。

修改

我的json对象

enter image description here

Answer 1

您需要使用内置的每个帮助程序来迭代记录和by_status数组。

{{#each orders.records}}
  {{#each by_status}}
    <div class="col-lg-2 col-md-6 new-item centered white-panel">
      <h2 class="white-header">{{PROCESSING}}</h2>
      <div class="clearfix"></div>
      <div><b>{{PROCESSING}} new </b>Orders</div>
      <div><b>{{SHIPPED}} </b>Pending</div>
      <br/>
      <div><i class="fa fa-refresh fa-2x"></i></div>
      <a href="#" id="btnsync">Sync</a>
    </div>
  {{/each}}
{{/each}}

我不确定你要完成的是什么，但上面的代码将输出4个div。它将为by_status数组中的每个元素输出1 div。看起来你只想输出一个带有摘要的div。如果是这种情况，您可能需要执行以下操作。

<div class="col-lg-2 col-md-6 new-item centered white-panel">
  <h2 class="white-header">{{orders.records.0.by_status.1.PROCESSING}}</h2>
  <div class="clearfix"></div>
  <div><b>{{orders.records.0.by_status.1.PROCESSING}} new </b>Orders</div>
  <div><b>{{orders.records.0.by_status.3.SHIPPED}} </b>Pending</div>
  <br/>
  <div><i class="fa fa-refresh fa-2x"></i></div>
  <a href="#" id="btnsync">Sync</a>
</div>

上面的代码假定PROCESSING和SHIPPED元素始终存在于by_status数组的相同位置。这可能不是很明智。我的建议是更改JSON响应的结构，或者如果不可能，则在将其传递给模板之前在Backbone视图中进行一些处理。

编辑：当我将代码发送到下面的代码时工作

 <div class="col-lg-2 col-md-6 new-item centered white-panel">
  <h2 class="white-header">{{orders.records.0.by_status.1.PROCESSING}}</h2>
  <div class="clearfix"></div>
  <div><b>{{orders.0.records.0.by_status.1.PROCESSING}} new </b>Orders</div>
  <div><b>{{orders.0.records.0.by_status.3.SHIPPED}} </b>Pending</div>
  <br/>
  <div><i class="fa fa-refresh fa-2x"></i></div>
  <a href="#" id="btnsync">Sync</a>
</div>

无法访问Backbone View Handlebars

1 个答案: