Javascript 无法访问主干视图手柄中的json对象

主干视图：

        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}}

我得到一张空白页，什么也没有显示

注意：

我正在使用hbsfy为我编译模板，因此

tpl

是一个已编译的模板，而不是html文件

编辑：

我的json对象

---

您需要使用内置的每个助手来迭代记录和按状态数组

{{#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}}

{{{#each orders.records}
{{{{每个人的身份}
{{处理}}
{{处理}}新订单
{{SHIPPED}}挂起


{{/每个}}
{{/每个}}

我不确定您到底想要完成什么，但是上面的代码将输出4个div。它将为by_状态数组中的每个元素输出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>

{{orders.records.0.by_status.1.PROCESSING}
{{orders.records.0.by_status.1.PROCESSING}}新订单
{{orders.records.0.by_status.3.SHIPPED}}挂起

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

编辑：在我为以下内容编写代码时起到了作用

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

{{orders.records.0.by_status.1.PROCESSING}
{{orders.0.records.0.by_status.1.PROCESSING}}新订单
{{orders.0.records.0.by_status.3.SHIPPED}}挂起

您是否正在编译车把模板？您是否使用browserify（或其他打包工具）打包js？如果是，则可以使用hbsfy转换预编译模板。您的模板中也有一些错误。看起来你正在尝试循环记录数组，你需要使用内置的每个助手{{{{each records}{{/each}}。请检查我的笔记。嗨，我尝试显示{{orders.metadata.recordcount}，但我也没有显示。嘿，它成功了，尽管我需要添加orders.0.records.0.by_status.1.PROCESSING

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