無法訪問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>