Не удается получить данные с json-сервера

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

Также я использую Глоток запустить сервер разработки на 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 функция ResumeView не возвращает this.

---

В целом, ваш код выглядит хорошо.

Если вы собираетесь поместить API на другой сервер, таким образом, еще один домен, посмотрите на CORS, который понадобится, чтобы включить js для извлечения другого домена.