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.
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.
来源:https://stackoverflow.com/questions/22956756/how-to-access-properties-passed-to-ember-component-inside-a-component-class