无法从json服务器获取数据

Question

I'm making a little project in Backbone.js and I'm running a json-server package to populate it wih some data. I've made a db.json file with data and ran json-server --watch db.json , it started and runs perfectly on localhost:3000 . In my Backbone app I have this:

// 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;
});

this is my 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;
});

and in app/javascripts/main.js I have this:

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: '/'
    });
});

Also I use Gulp to run a development server on localhost:8080 via gulp-connect and gulp-livereload . But when I navigate to localhost:8080/resumes , it returns me Cannot GET /resumes , though there's no errors in console. What am I doing wrong?+

Answer 1

With what's provided, we can't pinpoint the exact problem and cause, but let me try to help anyway.

I tried json-server and started it with the following db.json :

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

Then I made the simplest collection to use it.

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

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

And in my console, I can see:

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

Using it was surprisingly straightforward! So the problem is elsewhere. Maybe show us the full request (raw data).

---

Fetching a collection

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

There's no need to pass { data: { fetch: true, type:"get" } } as it is the default behavior anyway.

Chaining function calls

The following line inside ResumeList will fail:

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

This is because the render function of the ResumeView doesn't return this .

---

Overall, your code looks good.

If you're going to put the API on another server, thus another domain, take a look at CORS which will be needed to enable js to fetch a different domain.