Ich kann keine Daten von JSON-Server bekommen

Question

Ich mache ein kleines Projekt in Backbone.js und ich führe ein json-server Paket, um es mit einigen Daten zu füllen. Ich habe eine db.json Datei mit Daten gemacht und lief json-server --watch db.json, es begann und läuft perfekt auf localhost:3000. In meinem Backbone App Ich habe diese:

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

das ist mein 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; 
}); 

und in app/javascripts/main.js Ich habe dies:

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

Auch verwende ich Gulp einen Entwicklungs-Server laufen zu lassen auf localhost:8080 über gulp-connect und gulp-livereload. Aber wenn ich zu localhost:8080/resumes navigiere, gibt es mich Cannot GET /resumes zurück, obwohl es keine Fehler in der Konsole gibt. Was mache ich falsch? +

Answer 1

Mit dem, was zur Verfügung gestellt wird, können wir das genaue Problem und Ursache nicht genau bestimmen, aber lassen Sie mich versuchen, trotzdem zu helfen.

Ich versuchte json-server und begann sie mit folgenden db.json:

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

Dann machte ich die einfachste Sammlung, es zu benutzen.

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

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

Und in meiner Konsole, kann ich sehen:

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

es verwenden war überraschend einfach! Also ist das Problem woanders. Vielleicht zeigen Sie uns die vollständige Anfrage (Rohdaten).

---

Holen einer Sammlung

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

Es gibt keine Notwendigkeit { data: { fetch: true, type:"get" } } zu passieren, wie es das Standardverhalten ohnehin ist.

Chaining-Funktion aufruft

Die folgende Zeile innerhalb ResumeList fehl:

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

Dies liegt daran, die render Funktion des ResumeView nicht this zurückgibt.

---

Insgesamt sieht Ihr Code gut aus.

Wenn Sie die API auf einen anderen Server, also eine andere Domain, stellen, sehen Sie sich CORS an, die benötigt wird, um js eine andere Domain zu holen.