如何将对象转移到ember.js中的组件

u2nhd7ah  于 2023-11-18  发布在  其他
关注(0)|答案(1)|浏览(123)

Ember.js对我来说是全新的。(当前版本5.4)
我想建立一个小的WebUI。登录和菜单导航工作得很好。但我有问题的循环和可视化信息从单一循环的组件。
我有一个“主轴”组件。我在这个模板中每个循环。现在我想在每个循环中安装一个组件,并从该组件的模板中的对象输入各种信息。标题,值等。
main-axis.hbs

<div class="row">
 {{#each this.exampleArray as |axis|}}
    <div class="col-12 col-lg-6">
      <LinearAxis />
    </div>
 {{/each}}
</div>

字符串
main-axis.js

import Component from "@glimmer/component";

export default class MainAxis extends Component {
  exampleArray = [
        {title: 'foo', id:7},
        {title: 'bar', id:42}
    ];
}


示例模板“linear-axis.hbs”

<div class="card">
  <div class="card-header">
    Axis {{this.title}}
  </div>
  <div class="card-body">
    <p class="card-text">Number: {{this.id}}</p>
    <button type="button" class="btn btn-primary btn-sm">Click</button>
  </div>
</div>


app/components中的空js类“linear-axis.js

import Component from '@glimmer/component';

export default class LinearAxis extends Component {
// how i get informations from the loop and provide them into the individual template instance
}


我花了很多时间在Ember.js的文档上,并没有真正深入了解。

t0ybt7op

t0ybt7op1#

您可以执行<LinearAxis @axis={{axis}}/>,并在组件模板中执行{{@axis.title}}
linear-axis.js中,它将在this.args.axis

相关问题