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 真是太神奇了。
最近我一直在学习 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 真是太神奇了。