如何访问在组件类中传递给Ember Component的属性？

4jb9z9bj 于 2023-01-20 发布在其他

关注(0)|答案(2)|浏览(120)

我声明了template中的一个emberjs组件为：

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

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

<script type="text/x-handlebars" data-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() {
      // return true or false based on the OBJECT's property (e.g. "true" if object.type is 'AUTHORIZED')
  },
});

- 更新**

我实现它的方法如下：

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

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

ember.js

来源：https://stackoverflow.com/questions/22956756/how-to-access-properties-passed-to-ember-component-inside-a-component-class

2条答案

按热度按时间

omqzjyyz1#

它应该这样工作：

{{custom-component object_name=object}}

(you只是使用了错误的属性名称）。
如果object是对象名，则此操作应该有效。如果name是object的属性，则使用object.name。

- 更新**

这应该很简单。show_details应定义为计算属性，具体取决于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') 
});

或者更简单：

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

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

赞(0）回复(0）举报 2023-01-20

fsi0uk1n2#

更新Glimmer组件
在更新的Ember组件（Glimmer）中，您可以从this.args访问传递给component类内部组件的值，这里的指南非常有帮助。
指南中的简单示例
之前：

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" />

之后：
一个二个一个一个

赞(0）回复(0）举报 2023-01-20

我来回答

如何访问在组件类中传递给Ember Component的属性？

2条答案

相关问题

热门标签

最新问答