CODEWITHSUNDEEP
ember.js
user5113508
user5113508

Reputation:

EMBERJS How to access Model properties from within a template?

Recently I've been learning Ember and I've got a system setup so that I have a local .JSON file being fed into ember store. (Since I don't have a backend API yet and since I'm learning I'd rather focus on ember and just simulate the API side of things.)

Now that the data is flowing, I've noticed I'm unable to access the model properties. For example;

{{model.user}}

Was hoping someone could perhaps explain this to be a little better since I'm still learning and this seems to be giving me a lot of trouble.

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

Upvotes: 0

Views: 677

Answers (1)

alizahid
alizahid

Reputation: 969

Given your API design, you need to use queryRecord

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

You need to pass the empty object, because queryRecord expects parameters to find data.

Read more on Ember docs.

Since your model is an array of users, and you're trying to get one user, you need to change your query

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

Assuming your model is an instance of User, you're just trying to access the wrong property. It should be model.username, and you're trying to access model.user.

Also, look into Mirage if you haven't already. It's amazing for simulating APIs.

Upvotes: 1

Related Questions