骨幹分析嵌套JSON

Question

我正在建立我的第一個骨幹應用程序，我想知道哪個是最好的模式來解析與多個級別的JSON。這是JSON的一個簡單的小例子：

{ 
    "hotels":[ 
    { 
     "hotel" : [ 
     { 
      "name" : "Hotel1" 
     } 
     ] 
    }, 
    { 
     "hotel" : [ 
     { 
      "name" : "Hotel2" 
     } 
     ] 
    }, 
    { 
     "hotel" : [ 
     { 
      "name" : "Hotel3" 
     } 
     ] 
    } 
    ] 
} 

要打印我使用收集和查看在這樣的骨幹： COLLECTION：

var HotelsCollection = Backbone.Collection.extend({ 
      model: Hotel, 
      url: "includes/test-data.json", 
      parse : function(response){ 
       return response.hotels; 
      }  
     }); 

而這兩個視圖稱爲視圖，因爲每一個酒店，我想有不同的看法：

var AppView = Backbone.View.extend({ 
      initialize: function(){ 
       this.collection = new HotelsCollection(); 
       this.collection.bind('sync', this.render, this); 
       this.collection.fetch(); 
      }, 
      render: function(){ 
       console.log('Data is fetched'); 
       var element = this.$el; 
       element.html(''); 
       this.collection.each(function(model){ 
        console.log('new hotel'); 

        var hotelView = new HotelView({model:model}); 

        element.append(hotelView.el); 
       }); 
      } 
     }); 

     var HotelView = Backbone.View.extend({ 

      template: _.template($("#hotel-list-template").html()), 

      initialize: function(){ 
       console.log('HotelView initialized'); 
       this.render(); 
      }, 
      render: function(){ 
       console.log('HotelView render'); 

       $(this.el).html(this.template({model: this.options.model})); 
      } 
     }); 

我的模板是：

<script type="text/template" id="hotel-list-template"> 
    <div> 
     <h1>TEMPLATE HOTEL funziona? 
     <% _.each(hotel, function(acs) { %> 
      <a class="btn"><%= name %></a> 
     <% }); %> 
     </h1> 
    </div> 
    </script> 

但不打印的名字，我也試過：

<script type="text/template" id="hotel-list-template"> 
    <div> 
     <h1>TEMPLATE HOTEL funziona 
      <a class="btn"><%= hotel.name %></a> 
     </h1> 
    </div> 
    </script> 

但我不能打印值的名稱，該怎麼做？ 感謝

Answer 1

首先是JSON結構的的確確是怪異。修復您的服務器或要求您的服務器團隊尋求治療。但是，假設你無法取消ridiculousify服務器的JSON，這裏是如何使之成爲一個骨幹兼容的數組：

var HotelsCollection = Backbone.Collection.extend({ 
    model: Hotel, 
    url: "includes/test-data.json", 
    parse: function(response){ 
    //remove prefix/wrapper object and collect "hotel" 1-element arrays 
    var sillyArrays = _.pluck(response.hotels, 'hotel'); 
    //Extract the hotel objects from their silly 1-element arrays 
    //Synthesize a fake id attribute since backbone expects that 
    var hotels = _.map(sillyArrays, function (hotelArray, index) { 
    return {name: hotelArray[0].name, id: index + 1}; 
    }); 
    return hotels; 
    }  
}); 

這parse函數將返回該數據，其中骨幹就明白了。

[ { name: 'Hotel1', id: 1 }, 
    { name: 'Hotel2', id: 2 }, 
    { name: 'Hotel3', id: 3 } ] 

還要注意缺乏id屬性是你需要爲了最終解決您的應用程序與骨幹正常工作的另一件事。