Question

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

我正在尝试实现edit路由，但无法填充该模板的表单字段，甚至无法显示简单的值。我的index路线显示了帖子列表，按预期工作，但edit不是出于某种原因。

在我的模板中使用{{title}}不会呈现值，而是输出一串意外数据，类似于：<my-app@model:post::ember413:21>。我可能从route或其他地方传递了一些不正确的东西，但我不知道究竟是什么以及在哪里。

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

应用/ 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;

应用/路由/帖/ edit.js

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);
  }
});

应用/路由/帖/ index.js

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

应用/控制器/帖/ edit.js

import Ember from 'ember';

export default Ember.ObjectController.extend();

应用/串行化器/ application.js中

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));
  }
});

应用/模板/ edit.hbs

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

应用/模板/ index.hbs

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

看了一些例子，上面应该有用，所以serializer可能有错误。在路线中，我可以从商店访问价值。以下记录了在model路由的edit.js方法中使用时的预期数据：

this.store.find('post', params.post_id).then(function(post) {
  console.log(post.get('title'));
});

更新：Here is a JS Bin在没有Ember CLI的情况下重新创建大部分应用程序。行为与我本地机器上的行为完全相同; edit路由未正确显示内容值（由于某种原因，标题有效）。当我交换到灯具而不是API输出时，问题仍然是相同的。此外，bin中的模型不会映射到API返回的所有值，但这似乎没有什么区别。

更新2 ：似乎返回的有效负载的content条目导致了问题，当我重命名密钥时，它在edit模板中正确显示。之前没有意识到这一点，因为我非常专注于显示内容值并忘记测试其他值。不确定为什么它只发生在嵌套路由上，并且使用该特定关键字。

更新3 ：如果我理解正确，这可能与Ember Data有关to an outstanding issue，也有a proposal报告此类冲突。

无法在模板中使用Ember Data存储中的值

0 个答案: