无法从json服务器获取数据

Question

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

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

而且我用咕嘟咕嘟运行开发服务器localhost:8080 via 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; 

这是因为ResumeView的render函数不返回this。

---

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

如果你打算把API放在另一个服务器上，也就是另一个域，请看看CORS，这将需要启用js来获取不同的域。