如何访问在组件类中传递给Ember Component的属性？ [英] how to access properties passed to Ember Component inside a component-class?

问题描述

 < script type =text / x-handlebarsid = 组件/定制组件 > 
< h4>传递的对象的名称是：{{object.name}}< / h4> 
 {{#if show_details}} 
< p>传递的对象的细节是：{{object.details}}< / p> 
 {{/ if}} 
< / script> 
  

现在我在html模板中使用这个组件：

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

我的组件类定制组件如下所示：

  App.CustomComponentComponent = Ember.Component.extend（{
 show_details：function（）{
 //根据OBJECT的返回true或false属性（例如，如果object.type为AUTHORIZED，则为true）
}，
}）; 
  

更新

我实现的方式如下：

  App.CustomComponentComponent = Ember.Component.extend（{
 show_details：function（）{
 var object = this.get（'object'）; 
 if（object.type ==AUTHORIZED）
 return true; 
 else 
 return false; 
} 
}）; 
  

传递给组件类的参数可以使用它的 get 方法。

解决方案

应该这样工作：

  {{custom-component object_name = object}} 
  

（你刚刚使用错误的属性名称）。

如果对象是对象名称，这应该可以工作。如果name是对象的属性，然后使用 object.name 。

---

更新

这应该很简单。应根据对象类型定义为计算属性 c> show_details ：

  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'）
}）; 
  

或更简单：

  App.CustomComponentComponent = Ember.Component.extend（{
 show_details：function（）{
 return this.get（'object'）。get（'type'）=== AUTHORIZED; 
} .property（'object.type'）
}）; 
  

不要忘记使用 get 访问Ember对象的属性。

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.

这篇关于如何访问在组件类中传递给Ember Component的属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！