BackboneJs fetch() Json для отображения на View

Question

Я пытаюсь использовать backbonejs для извлечения данных JSON, отправленных с сервера, чтобы отобразить их в представлении. Но это не сработает.

Вот мои backbonejs

$(function() { 


var Service = Backbone.Model.extend({ 
    url: "/api/album/1", 
    defaults: { 
     id: '1', 
     title: 'abc', 
     article: 'abc' 

    }, 
    parse: function (response) { 
     return response.data; 
    } 
}); 


// Create a collection of services 
var ServiceList = Backbone.Collection.extend({ 
    // Will hold objects of the Service model 
    url: "/api/album/1", 
    model: Service 

}); 

var ServiceView = Backbone.View.extend({ 
    tagName: 'li', 
    events: { 
     'click': 'toggleService' 
    }, 
    initialize: function() { 

     this.listenTo(this.model, 'change', this.render); 
    }, 
    render: function() { 

     this.$el.html('<input type="checkbox" value="1" name="' + this.model.get('title') + '" /> ' + this.model.get('title') + '<span>$' + this.model.get('artist') + '</span>'); 
     this.$('input').prop('checked', this.model.get('checked')); 

     return this; 
    }, 
    toggleService: function() { 
     this.model.toggle(); 
    } 
}); 

var App = Backbone.View.extend({ 

    model: Service, 
    el: $('#main'), 
    initialize: function() { 
     this.model = new ServiceList(); 
     this.model.fetch(); 


     this.list = $('#services'); 

     this.model.each(function (service) { 

      var view = new ServiceView({model: service}); 
      this.list.append(view.render().el); 

     }, this); 
    }, 
    render: function() { 

     return this; 

    } 

}); 

new App(); 
}); 

Вот мой JSON

{ "Данные": { "ID": "1", "художник": "Готье", "название" : «Создание Зеркала»}}

Пожалуйста, игнорируйте мое плохое соглашение об именах в backbonejs, я пытаюсь заставить его работать

Answer 1

T чень это

var App = Backbone.View.extend({ 
    el: $('#main'), 

    initialize: function() { 
    var serviceList = new ServiceList(), 
     // if you don't have #services in html 
     //services = $(this.el).html('<div id="services"></div>'), 
     services = $(this.el).find('#services'), 
     serviceView; 

    serviceList.fetch({ 
     success: function(collection) { 
     collection.each(function(model) { 
      serviceView = new ServiceView({ 
      model: model 
      }); 

      services.append(serviceView.render().el); 
     }); 
     } 
    }); 
    }, 

    render: function() { 
    return this; 
    } 
}); 

DEMO: http://jsbin.com/hiziqi/1/ в этой демонстрации я изменил URL на удаленный сервер