Ember.js 无法在模板中使用来自余烬数据存储的值

我正在使用Ember v1.8.1、Ember CLI 0.1.15和Ember Data 1.0.0-beta.15构建一个简单的应用程序，试图学习Ember.js的基础知识。数据来自一个简单的RESTAPI，所以我使用DS.RESTAdapter和DS.RESTSerializer。有效负载在序列化程序中被规范化，因为API没有将其数据正确地包装在所需的哈希中

我试图实现一个

编辑

路由，但无法填充该模板的表单字段，甚至无法显示一个简单的值。我的

index

route显示了一个帖子列表，它可以正常工作，但是

edit

由于某些原因不能正常工作

在我的模板中使用

{{title}}

不会呈现值，而是输出一个意外数据字符串，大致如下所示：

。我可能从

路线

或其他地方传递了一些不正确的信息，但我不知道具体是什么和在哪里

以下是我的一些相关代码：

app/router.js

import Ember from 'ember';
import config from './config/environment';

var Router = Ember.Router.extend({
  location: config.locationType
});

Router.map(function() {
  this.route('login');

  this.resource('posts', function() {
    this.route('add');
    this.route('view', { path: ':post_id'});
    this.route('edit', { path: ':post_id/edit'});
  });
});

export default Router;

import Ember from 'ember';
import AuthenticatedRouteMixin from 'simple-auth/mixins/authenticated-route-mixin';

export default Ember.Route.extend(AuthenticatedRouteMixin, {
  model: function(params){
    return this.store.find('post', params.post_id);
  }
});

import Ember from 'ember';
import AuthenticatedRouteMixin from 'simple-auth/mixins/authenticated-route-mixin';

export default Ember.Route.extend(AuthenticatedRouteMixin, {
  model: function(){
    return this.store.find('post');
  }
});

import Ember from 'ember';

export default Ember.ObjectController.extend();

import Ember from "ember";
import DS from "ember-data";

export default DS.RESTSerializer.extend(DS.EmbeddedRecordsMixin, {
  primaryKey: 'ID',
  attrs: {
    author: { embedded: 'always' }
  },
  extractSingle: function(store, type, payload, id) {
    payload = { post : payload };
    return this._super(store, type, payload, id);
  },
  extractArray: function(store, type, payload) {
    payload = { posts : payload };
    return this._super(store, type, payload);
  },
  serializeIntoHash: function(hash, type, record, options) {
    Ember.merge(hash, this.serialize(record, options));
  }
});

<div class="page">
  <div class="page-content">
    <h2>{{title}}</h2>
    {{{content}}}
  </div>
</div>

<div class="page">
  <div class="page-content">
    <ul>
      {{#each}}
      <li>
        <h2>{{title}}</h2>
        {{{content}}}
      </li>
      {{/each}}
    </ul>
  </div>
</div>

app/routes/posts/edit.js

import Ember from 'ember';
import config from './config/environment';

var Router = Ember.Router.extend({
  location: config.locationType
});

Router.map(function() {
  this.route('login');

  this.resource('posts', function() {
    this.route('add');
    this.route('view', { path: ':post_id'});
    this.route('edit', { path: ':post_id/edit'});
  });
});

export default Router;

import Ember from 'ember';
import AuthenticatedRouteMixin from 'simple-auth/mixins/authenticated-route-mixin';

export default Ember.Route.extend(AuthenticatedRouteMixin, {
  model: function(params){
    return this.store.find('post', params.post_id);
  }
});

import Ember from 'ember';
import AuthenticatedRouteMixin from 'simple-auth/mixins/authenticated-route-mixin';

export default Ember.Route.extend(AuthenticatedRouteMixin, {
  model: function(){
    return this.store.find('post');
  }
});

import Ember from 'ember';

export default Ember.ObjectController.extend();

import Ember from "ember";
import DS from "ember-data";

export default DS.RESTSerializer.extend(DS.EmbeddedRecordsMixin, {
  primaryKey: 'ID',
  attrs: {
    author: { embedded: 'always' }
  },
  extractSingle: function(store, type, payload, id) {
    payload = { post : payload };
    return this._super(store, type, payload, id);
  },
  extractArray: function(store, type, payload) {
    payload = { posts : payload };
    return this._super(store, type, payload);
  },
  serializeIntoHash: function(hash, type, record, options) {
    Ember.merge(hash, this.serialize(record, options));
  }
});

<div class="page">
  <div class="page-content">
    <h2>{{title}}</h2>
    {{{content}}}
  </div>
</div>

<div class="page">
  <div class="page-content">
    <ul>
      {{#each}}
      <li>
        <h2>{{title}}</h2>
        {{{content}}}
      </li>
      {{/each}}
    </ul>
  </div>
</div>

app/routes/posts/index.js

import Ember from 'ember';
import config from './config/environment';

var Router = Ember.Router.extend({
  location: config.locationType
});

Router.map(function() {
  this.route('login');

  this.resource('posts', function() {
    this.route('add');
    this.route('view', { path: ':post_id'});
    this.route('edit', { path: ':post_id/edit'});
  });
});

export default Router;

import Ember from 'ember';
import AuthenticatedRouteMixin from 'simple-auth/mixins/authenticated-route-mixin';

export default Ember.Route.extend(AuthenticatedRouteMixin, {
  model: function(params){
    return this.store.find('post', params.post_id);
  }
});

import Ember from 'ember';
import AuthenticatedRouteMixin from 'simple-auth/mixins/authenticated-route-mixin';

export default Ember.Route.extend(AuthenticatedRouteMixin, {
  model: function(){
    return this.store.find('post');
  }
});

import Ember from 'ember';

export default Ember.ObjectController.extend();

import Ember from "ember";
import DS from "ember-data";

export default DS.RESTSerializer.extend(DS.EmbeddedRecordsMixin, {
  primaryKey: 'ID',
  attrs: {
    author: { embedded: 'always' }
  },
  extractSingle: function(store, type, payload, id) {
    payload = { post : payload };
    return this._super(store, type, payload, id);
  },
  extractArray: function(store, type, payload) {
    payload = { posts : payload };
    return this._super(store, type, payload);
  },
  serializeIntoHash: function(hash, type, record, options) {
    Ember.merge(hash, this.serialize(record, options));
  }
});

<div class="page">
  <div class="page-content">
    <h2>{{title}}</h2>
    {{{content}}}
  </div>
</div>

<div class="page">
  <div class="page-content">
    <ul>
      {{#each}}
      <li>
        <h2>{{title}}</h2>
        {{{content}}}
      </li>
      {{/each}}
    </ul>
  </div>
</div>

app/controllers/posts/edit.js

import Ember from 'ember';
import config from './config/environment';

var Router = Ember.Router.extend({
  location: config.locationType
});

Router.map(function() {
  this.route('login');

  this.resource('posts', function() {
    this.route('add');
    this.route('view', { path: ':post_id'});
    this.route('edit', { path: ':post_id/edit'});
  });
});

export default Router;

import Ember from 'ember';
import AuthenticatedRouteMixin from 'simple-auth/mixins/authenticated-route-mixin';

export default Ember.Route.extend(AuthenticatedRouteMixin, {
  model: function(params){
    return this.store.find('post', params.post_id);
  }
});

import Ember from 'ember';
import AuthenticatedRouteMixin from 'simple-auth/mixins/authenticated-route-mixin';

export default Ember.Route.extend(AuthenticatedRouteMixin, {
  model: function(){
    return this.store.find('post');
  }
});

import Ember from 'ember';

export default Ember.ObjectController.extend();

import Ember from "ember";
import DS from "ember-data";

export default DS.RESTSerializer.extend(DS.EmbeddedRecordsMixin, {
  primaryKey: 'ID',
  attrs: {
    author: { embedded: 'always' }
  },
  extractSingle: function(store, type, payload, id) {
    payload = { post : payload };
    return this._super(store, type, payload, id);
  },
  extractArray: function(store, type, payload) {
    payload = { posts : payload };
    return this._super(store, type, payload);
  },
  serializeIntoHash: function(hash, type, record, options) {
    Ember.merge(hash, this.serialize(record, options));
  }
});

<div class="page">
  <div class="page-content">
    <h2>{{title}}</h2>
    {{{content}}}
  </div>
</div>

<div class="page">
  <div class="page-content">
    <ul>
      {{#each}}
      <li>
        <h2>{{title}}</h2>
        {{{content}}}
      </li>
      {{/each}}
    </ul>
  </div>
</div>

app/serializers/application.js

import Ember from 'ember';
import config from './config/environment';

var Router = Ember.Router.extend({
  location: config.locationType
});

Router.map(function() {
  this.route('login');

  this.resource('posts', function() {
    this.route('add');
    this.route('view', { path: ':post_id'});
    this.route('edit', { path: ':post_id/edit'});
  });
});

export default Router;

import Ember from 'ember';
import AuthenticatedRouteMixin from 'simple-auth/mixins/authenticated-route-mixin';

export default Ember.Route.extend(AuthenticatedRouteMixin, {
  model: function(params){
    return this.store.find('post', params.post_id);
  }
});

import Ember from 'ember';
import AuthenticatedRouteMixin from 'simple-auth/mixins/authenticated-route-mixin';

export default Ember.Route.extend(AuthenticatedRouteMixin, {
  model: function(){
    return this.store.find('post');
  }
});

import Ember from 'ember';

export default Ember.ObjectController.extend();

import Ember from "ember";
import DS from "ember-data";

export default DS.RESTSerializer.extend(DS.EmbeddedRecordsMixin, {
  primaryKey: 'ID',
  attrs: {
    author: { embedded: 'always' }
  },
  extractSingle: function(store, type, payload, id) {
    payload = { post : payload };
    return this._super(store, type, payload, id);
  },
  extractArray: function(store, type, payload) {
    payload = { posts : payload };
    return this._super(store, type, payload);
  },
  serializeIntoHash: function(hash, type, record, options) {
    Ember.merge(hash, this.serialize(record, options));
  }
});

<div class="page">
  <div class="page-content">
    <h2>{{title}}</h2>
    {{{content}}}
  </div>
</div>

<div class="page">
  <div class="page-content">
    <ul>
      {{#each}}
      <li>
        <h2>{{title}}</h2>
        {{{content}}}
      </li>
      {{/each}}
    </ul>
  </div>
</div>

app/templates/edit.hbs

import Ember from 'ember';
import config from './config/environment';

var Router = Ember.Router.extend({
  location: config.locationType
});

Router.map(function() {
  this.route('login');

  this.resource('posts', function() {
    this.route('add');
    this.route('view', { path: ':post_id'});
    this.route('edit', { path: ':post_id/edit'});
  });
});

export default Router;

import Ember from 'ember';
import AuthenticatedRouteMixin from 'simple-auth/mixins/authenticated-route-mixin';

export default Ember.Route.extend(AuthenticatedRouteMixin, {
  model: function(params){
    return this.store.find('post', params.post_id);
  }
});

import Ember from 'ember';
import AuthenticatedRouteMixin from 'simple-auth/mixins/authenticated-route-mixin';

export default Ember.Route.extend(AuthenticatedRouteMixin, {
  model: function(){
    return this.store.find('post');
  }
});

import Ember from 'ember';

export default Ember.ObjectController.extend();

import Ember from "ember";
import DS from "ember-data";

export default DS.RESTSerializer.extend(DS.EmbeddedRecordsMixin, {
  primaryKey: 'ID',
  attrs: {
    author: { embedded: 'always' }
  },
  extractSingle: function(store, type, payload, id) {
    payload = { post : payload };
    return this._super(store, type, payload, id);
  },
  extractArray: function(store, type, payload) {
    payload = { posts : payload };
    return this._super(store, type, payload);
  },
  serializeIntoHash: function(hash, type, record, options) {
    Ember.merge(hash, this.serialize(record, options));
  }
});

<div class="page">
  <div class="page-content">
    <h2>{{title}}</h2>
    {{{content}}}
  </div>
</div>

<div class="page">
  <div class="page-content">
    <ul>
      {{#each}}
      <li>
        <h2>{{title}}</h2>
        {{{content}}}
      </li>
      {{/each}}
    </ul>
  </div>
</div>

更新：在不使用Ember CLI的情况下重新创建大部分应用程序。该行为与我本地机器上的行为完全相同；

edit

路径无法正确显示内容值（出于某种原因，标题起作用）。当我切换到fixture而不是API输出时，问题仍然存在。此外，bin中的模型没有映射到API返回的所有值，但这似乎没有什么区别

更新2：返回的有效负载的

内容

条目似乎是导致问题的原因，当我重命名密钥时，它在

编辑

模板中正确显示。我以前没有意识到这一点，因为我太专注于显示内容值，而忘记了测试其他值。不知道为什么它只发生在嵌套路由上，并且使用特定的关键字

---

更新3:如果我理解正确，这可能与余烬数据有关，也有用于报告此类冲突的方法。

同意^^^我们也需要模板。我已经用

编辑

和

索引

路线的模板更新了我的问题。恐怕没有那么花哨。我明天会试着编一把小提琴。最好是一把jsbin；）我已经用一个JS-Bin更新了我的问题：我能够在我编写的这个ember-cli-wordpress包装中使用

内容

，尽管没有编辑路径。我看了几分钟你的jsbin，但不太明白问题出在哪里。