获取集合

Question

我在Backbone.js做了一个小项目，我正在运行一个json-server包来填充一些数据。我创建了一个包含数据的db.json文件并运行json-server --watch db.json，它在localhost:3000上启动并完美运行。在我的Backbone应用程序中，我有这个：

// app/javascripts/collections/resumes.js

define(['backbone', 'models/resume'], function (Backbone, Resume) {
    var ResumesCollection = Backbone.Collection.extend({
        model: Resume,
        url: 'http://localhost:3000/resumes'
    });
    return ResumesCollection;
});

// app/javascripts/views/resumes/resume.js

define(['backbone', 'jquery'], function (Backbone, $) {
    var ResumeView = Backbone.View.extend({
        tagName: 'article',
        render: function () {
            this.$el.html(this.model.get("firstName"));
            return this;
        }
    });
    return ResumeView;
});

// app/javascripts/views/resumes/index.js

define(['backbone', 'views/resumes/resume'], function (Backbone, ResumeView) {
    var ResumesList = Backbone.View.extend({
        tagName: 'section',
        initialize: function() {
            this.collection.fetch();
        },
        render: function() {
            var resumesView = this.collection.map(function (cv) {
                return new ResumeView({model: cv}).render().el;
            });
            this.$el.html(resumesView);
            return this;
        }
    });
    return ResumeList;
});

这是我的app/router.js：

define(['backbone',
        'collections/resumes',
        'views/resumes/resume',
        'views/resumes/index'], 
function (Backbone, ResumesCollection, ResumeView, ResumeList) {
    var AppRouter = Backbone.Router.extend({
        routes: {
            'resumes': 'showAll'
        },
        showAll: function () {
            this.ResumeList.render();
        }
    });
    return AppRouter;
});

在app/javascripts/main.js我有这个：

require.config({
    shim: {
        underscore: {
            exports: '_'
        },
        backbone: {
            deps: [
                'underscore',
                'jquery'
            ],
            exports: 'Backbone'
        }
    },

    paths: {
        jquery: '../node_modules/jquery/dist/jquery',
        underscore: '../node_modules/underscore/underscore',
        backbone: '../node_modules/backbone/backbone'
    }
});

require(['backbone',
         'jquery',
         'router'
], function (Backbone, $, AppRouter) {
    var Router = new AppRouter();
    Backbone.history.start({
        pushState: true,
        root: '/'
    });
});

我还使用Gulp通过localhost:8080和gulp-connect在gulp-livereload上运行开发服务器。但是当我导航到localhost:8080/resumes时，它会返回Cannot GET /resumes，但控制台中没有错误。我做错了什么？+

Answer 1

通过提供的内容，我们无法确定确切的问题和原因，但无论如何我都会尝试提供帮助。

我尝试json-server并使用以下db.json启动了它：

{
    "posts": [{
        "id": 1,
        "title": "json-server",
        "author": "typicode"
    }, {
        "id": 2,
        "title": "This is a test",
        "author": "Emile Bergeron"
    }]
}

然后我制作了最简单的集合来使用它。

var PostCollection = Backbone.Collection.extend({
    url: "http://localhost:3000/posts"
});

var posts = new PostCollection();
posts.fetch({
    success: function(){
        console.log(posts.pluck('title'));
    }
});

在我的控制台中，我可以看到：

["json-server", "This is a test"]

使用它非常简单！所以问题出在其他地方。也许向我们展示完整的请求（原始数据）。

获取集合

this.collection.fetch(); // this is enough

无需传递{ data: { fetch: true, type:"get" } }，因为它无论如何都是默认行为。

链接函数调用

ResumeList内的以下行将失败：

return new ResumeView({model: cv}).render().el;

这是因为render的{{1}}函数不会返回ResumeView。

总的来说，您的代码看起来不错。

如果您要将API放在另一个服务器上，即另一个域，请查看CORS，这将使js能够获取不同的域。

无法从json-server获取数据

1 个答案:

获取集合

链接函数调用