骨干解析嵌套的JSON [英] backbone parse nested json

问题描述

我在我的层楼高主干第一个应用程序，我想知道这是解析与多级一个JSON的最佳模式。这是JSON的一个简单的小例子：

I'm buiding my first app in backbone and I want to know which is the best mode to parse a json with multiple level. This is a simple small example of json:

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

要我用收集和查看在这样的骨干打印：
系列：

To print it I'm using collection and view in backbone like this: COLLECTION:

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

这是两个视图称为视图，因为每一个酒店，我想有不同的看法：

And this is the two view called view because every hotel I'd like to have a different view:

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>

但不打印的名字我也试过：

But doesn't print name I have also tried:

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

但我不能打印值的名称，该怎么做？
谢谢

But I can't print the value name, how to do that? Thanks

推荐答案

首先，这JSON结构的的确确是怪异。修复您的服务器或询问您的服务器团队寻求治疗。但是，假设你无法取消ridiculousify服务器的JSON，这里是如何使之成为一个骨干兼容的数组：

First of all, that JSON structure is really, truly bizarre. Fix your server or ask your server team to seek therapy. But assuming you can't un-ridiculousify the server's JSON, here's how to make it into a backbone-compatible array:

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

这是解析函数将返回该数据，这些数据骨干网就明白了。

That parse function will return this data, which backbone will understand.

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

另外请注意缺少的id 属性是你需要为了解决最终为你的应用程序与骨干正常工作的另一件事。

Also note the lack of an id attribute is another thing you'll need to eventually resolve in order for your application to work properly with backbone.

这篇关于骨干解析嵌套的JSON的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！