使用findAll（）函數的Ember-Data中的錯誤

Question

我有一個后端服務器（在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文件中使用.findAll（）方法在app.ContactsRoute功能數據，我得到在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: 'J.D.', 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 e.g. /contacts or /contact/:id
    //this.route used when there is no noun or object behind it e.g. /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-data中？

我是ember.js的新手，正在完成一個教程。 我無法使用他在視頻中使用的相同版本。 因此使用了最新版本的Ember和Ember數據。

Answer 1

我已經使它適用於最新版本。 從您的代碼中更改了以下內容：

在App.js中 ：

內部app.ContactSerializer = DS.RESTSerializer.extend({ function：

extractArray函數已更改為新函數normalizeFindAllResponse （注意，更改此函數時參數也已更改）。 該功能現在看起來像：

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

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不需要明確引用Handlebars。

希望這會有所幫助，因為這些變化非常突出，可以推進到更新版本，因此很高興能夠使用最新版本。

使用findAll（）函數的Ember-Data中的錯誤

問題描述

1 個解決方案

解決方案1
1 已采納 2015-09-12 12:20:25

使用findAll（）函數的Ember-Data中的錯誤

問題描述

1 個解決方案

解決方案1 1 已采納 2015-09-12 12:20:25

解決方案1
1 已采納 2015-09-12 12:20:25