EMBERJS 如何从模板中访问模型属性?

EMBERJS How to access Model properties from within a template?

最近我一直在学习 Ember 并且我有一个系统设置,所以我有一个本地 .JSON 文件被送入 ember 商店。 (因为我还没有后端 API,而且因为我正在学习,所以我宁愿专注于 ember 并且只是模拟事物的 API 方面。)

现在数据正在流动,我注意到我无法访问模型属性。例如;

{{model.user}}

希望有人能解释得更好一些,因为我还在学习,这似乎给我带来了很多麻烦。

models/user.js

import DS from 'ember-data';

export default DS.Model.extend({
    username: DS.attr('string'),
    avatar: DS.attr('string'),
});

components/app-nav.js

{{#bs-navbar type="dark" class="d-flex" position="fixed-top" onCollapse=(action (mut collapsed) true) onExpand=(action (mut collapsed) false) as |navbar|}}
  {{navbar.toggle}}
  {{#navbar.content}}
    {{#navbar.nav as |nav|}}
      {{#link-to "index" class="navbar-brand"}}{{inline-svg "Logo.svg"}}{{/link-to}}
      {{#nav.item}}{{#nav.link-to "home"}}Home{{/nav.link-to}}{{/nav.item}}
      {{#nav.item}}{{#nav.link-to "test"}}Test{{/nav.link-to}}{{/nav.item}}
      {{#nav.item}}{{#nav.link-to "test2"}}Test 2{{/nav.link-to}}{{/nav.item}}
    {{/navbar.nav}}
    {{#navbar.nav class="ml-auto" as |nav|}}
      {{#if bIsLoggedIn}}
        {{#nav.dropdown class="user-drop" as |dd|}}
          {{#dd.toggle}} 
            <div class="avatar"><img src={{model.avatar}} width="32" height="32" alt=""></div>
            <div class="user">{{model.user}} <span class="caret"></span></div>
          {{/dd.toggle}}
          {{#dd.menu as |ddm|}}
            {{#ddm.item}}{{#ddm.link-to "index"}}Home{{/ddm.link-to}}{{/ddm.item}}
            {{#ddm.item}}{{#ddm.link-to "index"}}Test{{/ddm.link-to}}{{/ddm.item}}
          {{/dd.menu}}
        {{/nav.dropdown}}
      {{else}}
        <div class="login-button pr-3 text-center">
          <a class="btn btn-primary btn-lg" href="#" role="button">Login</a>
        </div>
      {{/if}}   
    {{/navbar.nav}}
  {{/navbar.content}}
{{/bs-navbar}}

鉴于您的 API 设计,您需要使用 queryRecord

return this.store.queryRecord('user', {})

您需要传递空对象,因为queryRecord需要参数来查找数据。

Ember docs 上阅读更多内容。


由于您的模型是一组用户,而您正试图获取一个用户,因此您需要更改查询

return this.store.findRecord('user', ID)


假设您的模型是 User 的一个实例,您只是试图访问错误的 属性。它应该是 model.username,而您正在尝试访问 model.user

此外,如果您还没有,请查看 Mirage。模拟 APIs 真是太神奇了。