tcelestino · August 29, 2015 14:21
diff --git a/countries.json b/countries.json
 panCallback(
  {
    countries: [
      {
        "EUA": {
          "position": 1,
          "summary":
          {
            "gold": 9,
            "silver": 15,
            "bronze": 24,
            "total": 55
          }
        }
      },
      {
        "Brasil": {
          "position": 2,
          "summary":
          {
            "gold": 9,
            "silver": 15,
            "bronze": 24,
            "total": 55
          }
        }
      }
    ]
  }
 );
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Backbone Example</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.3/underscore-min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.9/backbone-min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.3/handlebars.js"></script>
 </head>
 <body>
 <div class="main"></div>
 <script id="meu-template" type="text/x-handlebars-template">
  <p>{{countryName}} - {{position}} - {{summary.bronze}} | {{summary.gold}} | {{summary.silver}} | {{summary.total}}</p>
 </script>
  <script>
    (function() {

      var Model = Backbone.Model.extend({
        defaults: {
          countryName: '',
          abbrName: '',
          position: ''
        },
        initialize: function () {
          console.log('model load');
        }
      });

      var Collection = Backbone.Collection.extend({
        initialize: function () {
          this.url = 'http://localhost:8000/countries.json';
        },

        parse: function (data) {
          var that = this;
          var countries = _.map(data.countries, function (country, index) {
            var countryKey = _.keys(country);
            var countryName = countryKey[0];
            var key = country[countryName];

            var obj = {
              countryName: countryName,
              abbrName: countryName.toLowerCase(),
              position: key.position,
              summary: key.summary
            };
            return obj;
          });
          return countries;
        }
      });

      var ListCountries = Backbone.View.extend({
        tagName: 'div',
        template: Handlebars.compile($('#meu-template').html()),
        render: function () {
          this.$el.html(this.template(this.model.toJSON()));
          return this;
        }
      });

      var View = Backbone.View.extend({
        el: '.main',
        initialize: function () {
          this.render();
        },
        render: function() {
          this.collection.each(this.add, this);
          return this;
        },
        add: function (model) {
          var list = new ListCountries({
            model: model
          });
          this.$el.append(list.render().el);
        }
      });

      var model = new Model();

      var collection = new Collection();

      collection.fetch({
        method: 'GET',
        dataType: 'jsonp',
        jsonpCallback: 'panCallback'
      }).then(function () {
        new View({ collection: collection });
      });
    }());
  </script>
 </body>
 </html>
	panCallback(
	{
	countries: [
	{
	"EUA": {
	"position": 1,
	"summary":
	{
	"gold": 9,
	"silver": 15,
	"bronze": 24,
	"total": 55
	}
	}
	},
	{
	"Brasil": {
	"position": 2,
	"summary":
	{
	"gold": 9,
	"silver": 15,
	"bronze": 24,
	"total": 55
	}
	}
	}
	]
	}
	);
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Backbone Example</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.3/underscore-min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.9/backbone-min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.3/handlebars.js"></script>
	</head>
	<body>
	<div class="main"></div>
	<script id="meu-template" type="text/x-handlebars-template">
	<p>{{countryName}} - {{position}} - {{summary.bronze}} \| {{summary.gold}} \| {{summary.silver}} \| {{summary.total}}</p>
	</script>
	<script>
	(function() {

	var Model = Backbone.Model.extend({
	defaults: {
	countryName: '',
	abbrName: '',
	position: ''
	},
	initialize: function () {
	console.log('model load');
	}
	});

	var Collection = Backbone.Collection.extend({
	initialize: function () {
	this.url = 'http://localhost:8000/countries.json';
	},

	parse: function (data) {
	var that = this;
	var countries = _.map(data.countries, function (country, index) {
	var countryKey = _.keys(country);
	var countryName = countryKey[0];
	var key = country[countryName];

	var obj = {
	countryName: countryName,
	abbrName: countryName.toLowerCase(),
	position: key.position,
	summary: key.summary
	};
	return obj;
	});
	return countries;
	}
	});

	var ListCountries = Backbone.View.extend({
	tagName: 'div',
	template: Handlebars.compile($('#meu-template').html()),
	render: function () {
	this.$el.html(this.template(this.model.toJSON()));
	return this;
	}
	});

	var View = Backbone.View.extend({
	el: '.main',
	initialize: function () {
	this.render();
	},
	render: function() {
	this.collection.each(this.add, this);
	return this;
	},
	add: function (model) {
	var list = new ListCountries({
	model: model
	});
	this.$el.append(list.render().el);
	}
	});

	var model = new Model();

	var collection = new Collection();

	collection.fetch({
	method: 'GET',
	dataType: 'jsonp',
	jsonpCallback: 'panCallback'
	}).then(function () {
	new View({ collection: collection });
	});
	}());
	</script>
	</body>
	</html>