如何从模板中访问模型属性？

Question

最近，我一直在学习Ember，我有一个系统设置，所以我有一个本地的.JSON文件被输入到烬商店。(由于我还没有后端API，而且我正在学习，所以我更愿意关注ember，只是模拟API方面的事情。)

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

{{model.user}}

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

模型/user.js

import DS from 'ember-data';

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

组件/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}}

Answer 1

考虑到API的设计，您需要使用queryRecord

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

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

阅读有关成员文档的更多信息。

由于您的模型是一个用户数组，并且您试图获得一个用户，所以需要更改您的查询

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

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

此外，如果您还没有了解幻影，请查看它。它对于模拟API来说是令人惊奇的。