Handlebars 组件呈现但未填充 json 数据

Question

我是 ember 的新手，我想在我的 ember.js 应用程序中创建一个导航组件。

我之前创建了一个组件，其方式与 API 提供的 json 数据呈现我的博客 posts 的方式完全相同。基本上，您在此处看到的代码完全相同，但关键字 post 已替换为关键字 page。

问题是车把组件正在渲染，但 page.title.rendered 不是 'rendered'。即使当我尝试在我的序列化器中使用 console.log(payload) 时，我也没有得到任何控制台输出。就好像不认识一样。

json 来自 api

的示例

[
   {
      "id":139,
      "title":{
         "rendered":"test"
      }
   }
]

adapters/page.js

export default Eudora.extend({

    pathForType() {
        return 'pages';
    }
});

models/page.js

import Model from 'ember-data/model';
import DS from 'ember-data';

const { 
    attr,
    //belongsTo 
} = DS;

export default Model.extend({

    title: attr()

});

routes/pages.js

import Ember from 'ember';

const {
    Route,
    set
} = Ember;

export default Route.extend({

    model() {

        return this.store.findAll('page');
    },

    setupController(controller, model) {
        set(controller, 'pages', model);
    }
});

serializers/page.js

import DS from 'ember-data';

export default DS.RESTSerializer.extend({

    normalizeResponse( store, primaryModelClass, payload, id, requestType) {

        payload = { pages: payload };

        return this._super( store, primaryModelClass, payload, id, requestType );

    }
});

templates/components/global-navigation.hbs

{{#each pages as |page|}}
    <li>
        <a href="#">{{page.title.rendered}}</a>
    </li>          
{{/each}}

templates/application.hbs

{{global-navigation pages=pages}}

Answer 1

page模型中没有content属性。正确的代码是

<a href="#">{{page.title.rendered}}</a>

我猜在 adapters/page.js 文件中，Eudora 正在扩展 DS.RESTAdapter。

页面路由模型挂钩正在返回页面模型，但您试图将其包含在 application.hbs 中。所以将 {{global-navigation pages=pages}} 移动到 routes/pages.hbs。并访问 URL '/pages。

我为您创建了示例 EMBER-TWIDDLE。这将显示应用程序和页面路由的结果。

Answer 2

感谢@kumkanillam 帮我找到答案。正如评论中所写，我的问题是：

...You are including global-navigation in application route but you are loading model in pages route...

因此我不得不扩展我的 routes/application.js 以包括帖子和页面。下面的代码说明了我是如何做到的：

routes/application.js

import Ember from 'ember';

export default Ember.Route.extend({

    model() {
        return Ember.RSVP.hash({

            posts: this.store.findAll('post'),
            pages: this.store.findAll('page')
        });

    },

    setupController(controller, model) {
        Ember.set(controller, 'posts', model.posts);
        Ember.set(controller, 'pages', model.pages);
    }
});

Handlebars 组件呈现但未填充 json 数据

Handlebars component rendering but not populated with json data

handlebars.js

ember.js

ember-data