Javascript 从主干网对GitHub API的Ajax调用_Javascript_Ajax_Json_Backbone.js_Github Api

Javascript 从主干网对GitHub API的Ajax调用

javascript ajax json backbone.js

Javascript 从主干网对GitHub API的Ajax调用,javascript,ajax,json,backbone.js,github-api,Javascript,Ajax,Json,Backbone.js,Github Api,我正在探索主干网，在尝试从GitHub API检索JSON时遇到了一个问题。我正在创建一个快速的web应用程序，从GitHub Rails repo检索一个分页的未解决问题列表。我挂断的地方是调用检索包含问题第一页的JSON（暂时忘记分页）我可以通过一个简单的jqueryajax调用获得问题的第一页，但这并没有正确地使用主干网 $.getJSON("https://api.github.com/repos/rails/rails/issues?state=open", function(dat

我正在探索主干网，在尝试从GitHub API检索JSON时遇到了一个问题。我正在创建一个快速的web应用程序，从GitHub Rails repo检索一个分页的未解决问题列表。我挂断的地方是调用检索包含问题第一页的JSON（暂时忘记分页）

我可以通过一个简单的jqueryajax调用获得问题的第一页，但这并没有正确地使用主干网

$.getJSON("https://api.github.com/repos/rails/rails/issues?state=open", function(data) {...});

这是我的主干JavaScript——此时在一个文件中处理所有内容更容易

$(function() {
    // Define namespace as RailsIssues
    window.RailsIssues = {
        Models: {},
        Collections: {},
        Views: {}
    };

    // Global function to simplify template property syntax
    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,

        /* not getting anything back */
        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 title = issue.attributes['title'];
                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);
});

这是我的HTML——除了资源之外，这里真的没有什么有趣的东西。我只是尝试获取数据，并将其放入文档体中，稍后将进行样式设置

<!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>



Rails问题
Rails GitHub中的开放问题

在尝试检索JSON数据时，我遗漏了什么？代码只是默默地失败，什么也不返回，而上面的jQuery确实返回所需的JSON。您能提供的任何建议都会非常有用。

我试图运行您的代码，但缺少

issuesTemplate

和

issuesTemplate

，但是我注意到您实例化了视图，但从未实例化过集合或模型。而是将视图的集合指向视图问题的定义（而不是集合实例）：

此外，创建新集合后，需要调用

fetch（）

，使主干执行API调用以收集所需的JSON。我建议您采取以下措施：

var issuesCollection = new RailsIssues.Collections.Issues();
issuesCollection.fetch();  // makes the GET request
var issuesView = new RailsIssues.Views.Issues({ collection: issuesCollection });

我一直无法找出问题中所示的代码错误，但在的帮助下，我终于能够让Ajax API调用正常工作

此代码仅检索结果的第一页（发布在上的问题），并在无序列表中显示问题编号

以下是HTML，它按正确的顺序包含模板和脚本标记：

<!DOCTYPE html lang="en">
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="icon" type="image/x-icon" href="https://assets-cdn.github.com/favicon.ico">      

         <script id="issuesTemplate" type="text/template">
            <% $.each(issues, function() { %>
                <li><%= this.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>
        <div class="theList">Loading... Please Wait.</div>
    </body>
</html>

在上面的HTML中，第一个标记定义issuesTemplate。我缺少什么吗？我正在将模板与JavaScript中的集合视图相关联，例如Rails.Views.Issues=Backbone.view.extend（{template:template（'issuesTemplate'）），…它依赖于脚本窗口顶部附近的小函数。template…它在设置模板属性时启用了更清晰的语法。我的代码笔上现在有一个扩展的、功能齐全的版本

<!DOCTYPE html lang="en">
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="icon" type="image/x-icon" href="https://assets-cdn.github.com/favicon.ico">      

         <script id="issuesTemplate" type="text/template">
            <% $.each(issues, function() { %>
                <li><%= this.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>
        <div class="theList">Loading... Please Wait.</div>
    </body>
</html>

var RI = {
    run: function() {
        this.listview = new this.listView();
        this.issuescollection = new RI.issuesCollection();
        this.router = new this.Router();
        Backbone.history.start();
        this.router.navigate('list_issues');
    }
};

RI.Router = Backbone.Router.extend({
    routes: {
        'list_issues': 'renderListIssuesPage'
    },

    renderListIssuesPage: function () {
        RI.listview.setElement('div.theList');
        RI.listview.listIssuesPage();
    }
});

RI.issueModel = Backbone.Model.extend({

});

RI.issuesCollection = Backbone.Collection.extend({
    model: RI.issueModel,   
    url: 'https://api.github.com/repos/rails/rails/issues'
}); 

RI.listView = Backbone.View.extend({
    el: 'div.theList',

    template: _.template($('#issuesTemplate').html()),

    initialize: function () {
        _.bindAll(this, 'listIssuesPage', 'render');
    },

    render: function (response) {
        var self = this;

        this.$el.html(this.template({issues: response}));
    },

    listIssuesPage: function (querystring) {
        var self = this;

        RI.issuescollection.fetch({
            data: querystring,
            success: function(collection, response) {
                self.render(response);
            }
        });
    }
});

$(function() {
    RI.run();
});