Ember中的错误 – 使用findAll()函数的数据

我有一个后端服务器(在node.js上运行),我使用Ember(v 2.0.2)和Ember-data(2.0.0)与JQuery(2.1.4)。 node.js具有body-parser和express安装。 前端库是Ember,Ember-data和JQuery

当我在App.js文件的app.ContactsRou​​te函数中使用.findAll()方法获取数据时,Chrome开发人员控制台中出现以下错误

处理路由时出错:联系人断言失败:您必须在传递给“push”的对象中包含一个未定义的“id”错误:断言失败:您必须在传入“push”的对象中包含未定义的“id”错误(本机)

本地主机网站链接显示Ember-template-compiler和Ember-data的错误。 由于限制在问题中发布超链接,所以不能在这里发表

Server.js文件:

var express = require('express'), bodyParser = require('body-parser'), app=express(); var id = 7; var data = { 1: {id:1, firstName: 'Danny', lastName: 'Stork', email: 'dannystork@example.com'}, 2: {id:2, firstName: 'Carlotta', lastName: 'McOwen', email: 'carlottamcowen@example.com'}, 3: {id:3, firstName: 'Luther', lastName: 'Ellery', email: 'lutherellery@example.com'}, 4: {id:4, firstName: 'Finch', lastName: 'Hosky', email: 'finchhosky@example.com'}, 5: {id:5, firstName: 'Carson', lastName: 'Andrews', email: 'carsonandrews@example.com'}, 6: {id:6, firstName: 'Mac', lastName: 'Parker', email: 'macparker@example.com'}, 7: {id:7, firstName: 'JD', lastName: 'Barney', email: 'jdbarney@example.com'}, }; app.use(bodyParser.json()); app.use(express.static('./public')); app.route('/api/contacts') .get(function(req,res){ res.json(Object.keys(data).map(function(key){ return data[key]; })); }) .post(function(req,res){ var record = req.body record.id = ++id; data[record.id] = record; res.json(record); }); app.route('/api/contacts/:id') .get(function(req,res){ res.json(data[req.params.id]); }) .put(function(req,res){ data[req.params.id]=req.body; res.json(req.body); }) .delete(function(req,res){ delete data[req.params.id]; res.json(null); }); app.get('*', function(req,res){ res.sendFile(__dirname + '/public/index.html'); }); app.listen(3000); 

app.js文件:

 var app = Ember.Application.create(); app.ApplicationAdapter = DS.RESTAdapter.extend({ namespace:'api' }); app.Contact = DS.Model.extend({ firstName: DS.attr('string'), lastName: DS.attr('string'), email: DS.attr('string') }); app.ContactSerializer = DS.RESTSerializer.extend({ extractArray: function(store, primaryType, payload){ payload ={contacts: payload} ; return this._super(store,primaryType,payload); }, extractSingle: function(store, primaryType, payload, recordId){ payload ={contact: payload} ; return this._super(store,primaryType,payload,recordId); }, serializeIntoHash: function(hash,type, snapshot,option){ var json = this.serialize(snapshot, {included:true}); Object.keys(json).forEach(function(key){ hash[key] = json[key]; }); } }); //to get pushstate routes instead of hashbang routes - #! //access the app.Router class and set the location app.Router.reopen({ location: 'history' }); //routes app.Router.map( function(){ //this.resource used when there is a noun or object behind eg /contacts or /contact/:id //this.route used when there is no noun or object behind it eg /contact/new (no existing data is present) this.route('contacts'); this.route('contact',{path: 'contacts/:contact_id'}); this.route('new',{path: 'contacts/new'}); }); //this is used for the default route when it doesn't match any other routes in the above list of routes. app.IndexRoute = Ember.Route.extend({ redirect: function(){ this.transitionTo('contacts'); } }); app.ContactsRoute = Ember.Route.extend({ model: function() { return this.store.findAll('contact'); } }) 

index.html的:

 <html> <head> <title> Ember Contacts </title> <link rel='stylesheet' href='/style.css' /> <base href="/"> </head> <body> <!-- This is like the app class (here id = application is used) defined as top level template --> <!-- This is common to all our pages --> <script type='text/x-handlebars' id='application'> <div id='main'> <header> <h1> {{#link-to 'contacts'}} Ember Contacts {{/link-to}}</h1> </header> <div id='app'> {{outlet}} </div> </div> </script> <script type='text/x-handlebars' id='contacts'> <div class='actions'> {{#link-to 'new'}} NEW Contact {{/link-to}} </div> <ul> {{#each contact in model}} <li> {{#link-to 'contact' contact}} {{contact.firstName}} {{contact.lastName}} <span>{{contact.email}}</span> {{/link-to}} </li> {{/each}} </ul> </script> <script src='/lib/jquery/dist/jquery.min.js'></script> <script src='/lib/ember/ember-template-compiler.js'></script> <script src='/lib/ember/ember.debug.js'></script> <script src='/lib/ember-data/ember-data.js'></script> <script src='/app.js'></script> </body> </html> 

有人可以帮助解决这个问题吗? 为什么这个错误是在呃数据?

我是ember.js的新手,正在完成一个教程。 我无法使用他在video中使用的相同版本。 因此使用了最新版本的Ember和Ember-data。

我已经使它的最新版本。 从您的代码中更改了以下内容:

在App.js中

里面的app.ContactSerializer = DS.RESTSerializer.extend({函数:

  1. extractArray函数已被更改为新函数normalizeFindAllResponse (注意当更改此函数时,参数也已更改)。 该函数现在看起来像:

     normalizeFindAllResponse: function(store, primaryModelClass, payload, id, requestType){ payload = {contacts: payload}; return this._super(store, primaryModelClass, payload, id, requestType); }, 
  2. extractSingle函数已被更改为新函数normalizeFindRecordResponse (注意当更改此函数时,参数也已更改)。 该函数现在看起来像:

     normalizeFindRecordResponse: function(store, primaryModelClass, payload, id, requestType){ payload ={contact: payload} ; return this._super(store, primaryModelClass, payload, id, requestType); }, 

在Index.html中<ul>标签中,将“ {{#each contact in model}} ”改为“ {{#each model as |contact|}} ”。 并移除Handlebars参考<script src='/lib/handlebars/handlebars.js'> </script> 。 Ember的最新版本不需要明确提及手把。

希望这有助于,它的好处是与最新版本的变化是显而易见的向前推进到新版本。