CODEWITHSUNDEEP
javascriptember.jscomponents
Kumar Gaurav
Kumar Gaurav

Reputation: 1317

How to access variable on template file which is set in route or component in ember

This is very basic question but i am not finding it any where.

As per my understanding before rendering template correspondin route or component.js's beforeModel() model() etc functions gets called.

What i want to do: I want to show image of logged in user on my sidenav. User's data is stored in local storage.

My problems here I am hoping that setting a variable in model and returning the same will solve my problem, but my model method is not being called at all.

My Code: Template:

{{#paper-sidenav
      class="md-whiteframe-z2"
      name="right"
      open=leftSideBarOpen2
      lockedOpen=leftSideBarLockedOpen
      position="right"
      onToggle=(action (mut leftSideBarOpen2))}}
      {{#paper-toolbar as |toolbar|}}
        {{#paper-toolbar-tools}}
          <img src="http://example.com/users/{{model.username}}.jpg" />
        {{/paper-toolbar-tools}}
      {{/paper-toolbar}}
      {{#paper-content padding=true}}
        Çup?
      {{/paper-content}}
    {{/paper-sidenav}}

Component.js

import Ember from 'ember';

export default Ember.Component.extend({
  beforeModel(){

  },
  model(){
    let user = localStorage.get('user');
    console.log(user.username);
    return user;
  },
  actions:{
    toggle(propName) {
      this.toggleProperty(propName);
    }
  }
});

In console i am getting error "GET http://example.com/users/.jpg 404 (Not Found)", which certainly says that user.username in my template evaluates to null. i tried debugging my model method in chrome's dev tool and found that model is not getting called Could you please let me know where i'm mistaking?

Upvotes: 2

Views: 1978

Answers (2)

kamprasad
kamprasad

Reputation: 648

Ember component does not have model() and afterModel() hooks, what you need to do, is first access the local storage data in afterModel() hook in route and pass the resolved model to component.

Main Route

 export default Ember.Route.extend({
      model(){
        //load data
      },
      afterModel(model){
       //access local store and set to model
         model.set('users',data);
      }
    });

Main route hbs

{{component componetModel=model}}

inside component

import Ember from 'ember';

    export default Ember.Component.extend({
       init(){
         this.set('users', componetModel.users);
       }
    });

component hbs

{{#each user in users}}
  {{user.name}}
{{/each}}

Upvotes: 2

XYZ
XYZ

Reputation: 27387

You really have to read the documentation about component. It clearly state what are the lifecycle hooks for each stage,

  1. init
  2. update
  3. delete

https://guides.emberjs.com/v2.11.0/components/the-component-lifecycle/

The only thing the template have access to from route is model so that you can use model directly inside the corresponding template OR pass it to the component(s).

If you need other property for your component you can either set them inside route's setupController(controller, model) hook OR create a controller for that route.

Illustration below is a sample for one specific route,

enter image description here

NOTE: Dashed line represents the runtime generate controller

See image above each "layer" only have access the property OR action direct inside the upper layer (special case is route auto inject model into runtime generated controller).

You do NOT need to specifically define your own controller because if the route cannot find one it will generate one at runtime.

The component is completed isolated from literally anything (unless you inject anything into it). The only way to work with the component is to pass data and action (usually used to handle events) to it.

Summary

(1) The component can only access the data you specifically passed to it (see code below).

 {{component-name
   internalName=externalName
 }}

(2) The template can only access the data that is available inside the controller, either auto-generated one or via ember g controller controller-name. (model property is an exception)

(3) If you want to your template to have route data, using setupController hook.

Upvotes: 1

Related Questions