CODEWITHSUNDEEP
ember.jspropertiescomponents
exAres
exAres

Reputation: 4926

how to access properties passed to Ember Component inside a component-class?

I have DECLARED an emberjs component in template as:

<script type="text/x-handlebars" id="components/custom-component">      
  <h4>The name of the object passed is : {{object.name}}</h4>
  {{#if show_details}}
    <p>The details of the object passed are : {{object.details}}</p>
  {{/if}}
</script>

Now I am USING this component in my html template as :

<script type="text/x-handlebars" data-template-name="index">
  <ul>
    {{#each object in model}}
      <li>{{custom-component object=object}}</li>
    {{/each}}
  </ul>
</script>

My component class for custom-component is as shown below :

App.CustomComponentComponent = Ember.Component.extend({
  show_details: function() {
      // return true or false based on the OBJECT's property (e.g. "true" if object.type is 'AUTHORIZED')
  },
});

Update

The way I achieved it is as follows :

App.CustomComponentComponent = Ember.Component.extend({
    show_details: function() {
      var object = this.get('object');
      if (object.type == "AUTHORIZED")
        return true;
      else
        return false;
    }
});

The parameters passed to the component class are available using it's get methods.

Upvotes: 4

Views: 10602

Answers (2)

Rami Alloush
Rami Alloush

Reputation: 2626

Updated for Glimmer Components

In the newer Ember components (Glimmer), you can access the values passed to the components inside the component class from this.args. The guide here is very helpful.

Simple example from the guide

Before:

import Component from '@ember/component';
import { computed } from '@ember/object';

export default Component.extend({
  width: 0,
  height: 0,

  aspectRatio: computed('width', 'height', function() {
    return this.width / this.height;
  })
});

{{!-- Usage --}}
<Image @width="1920" @height="1080" />

After:

import Component from '@glimmer/component';

export default class ImageComponent extends Component {
  get aspectRatio() {
    return this.args.width / this.args.height;
  }
}

{{!-- Usage --}}
<Image @width="1920" @height="1080" />

Upvotes: 0

splattne
splattne

Reputation: 104040

It should work this way:

{{custom-component object_name=object}}

(you just used the wrong property name).

This should work if object is the object name. If name is a property of object then use object.name.

UPDATE

This should be straightforward. show_details should be defined as computed property depending on the object type:

App.CustomComponentComponent = Ember.Component.extend({
    object: null,
    show_details: function() {
      var object = this.get('object');
      if (object.get('type') === "AUTHORIZED")
         return true;
      else
         return false;
    }.property('object.type') 
});

or simpler:

App.CustomComponentComponent = Ember.Component.extend({
    show_details: function() {
      return this.get('object').get('type') === "AUTHORIZED";
    }.property('object.type') 
});

Don't forget to use get when accessing the properties of an Ember object.

Upvotes: 6

Related Questions