Currently delving into Backbone, I have encountered an issue while attempting to fetch JSON data from the GitHub API. My goal is to create a simple web application that retrieves a paginated list of open issues from the GitHub Rails repository. The stumbling block for me lies in fetching the JSON data containing the initial page of issues without concern for pagination.
While I can easily attain the first page of issues using a straightforward jQuery Ajax call, this method does not fully utilize Backbone.
$.getJSON("https://api.github.com/repos/rails/rails/issues?state=open", function(data) {...});
Below is my Backbone JavaScript code -- currently keeping everything within one file for simplicity.
$(function() {
// Namespace defined as RailsIssues
window.RailsIssues = {
Models: {},
Collections: {},
Views: {}
};
// Global function simplifying template property referencing
window.template = function(id){
return _.template( $('#' + id).html());
}
// Issue model
RailsIssues.Models.Issue = Backbone.Model.extend({
});
// IssueList collection
RailsIssues.Collections.Issues = Backbone.Collection.extend({
model: RailsIssues.Models.Issue,
/* No data returned */
url: "https://api.github.com/repos/rails/rails/issues",
parse: function(data){
return data;
}
});
// Issue view
RailsIssues.Views.Issue = Backbone.View.extend({
tagname: 'li',
template: template('issueTemplate'),
initialize: function(){
this.render();
},
render: function(){
this.$el.html(this.template(this.model.toJSON()));
return this;
}
});
// Issues view
RailsIssues.Views.Issues = Backbone.View.extend({
template: template('issuesTemplate'),
render: function(eventName) {
_.each(this.model, function(issue) {
var number = issue.attributes['number'];
var xtemplate = this.template(issue.toJSON());
$(this.el).append(xtemplate);
}, this);
return this;
}
});
Backbone.sync = function(method, model) {
alert(method + ": " + model.url);
}
var issuesView = new RailsIssues.Views.Issues({ collection: RailsIssues.Views.Issues });
$(document.body).append(issuesView.render().el);
});
Below is the HTML code -- primarily showcasing resources with no significant content at the moment. Initially focused on retrieving and displaying the data in the document body before moving onto styling.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script id="issuesTemplate" type="text/template">
<li><%= number %></li>
</script>
<script src="script/underscore.js"></script>
<script src="script/jquery-1.11.1.min.js"></script>
<script src="script/backbone.js"></script>
<script src="script/script.js"></script>
<title>Rails Issues</title>
</head>
<body>
<header>
Open Issues in Rails GitHub
</header>
</body>
</html>
I am encountering difficulties in retrieving the JSON data. The current code fails silently, providing no output, whereas the jQuery method mentioned earlier successfully returns the desired JSON data. Any guidance or suggestions would be greatly appreciated.