无法在 Backbone View Handlebars 中访问 json 对象

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 对象

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。似乎您只是想输出 1 个带有摘要的 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>