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

Question

Backbone 查看：

        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

您需要使用内置的 each 助手来遍历记录和 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 divs。它将为 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>

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

Not able to access json object in Backbone View Handlebars

javascript

json

backbone.js

browserify