javascript - 在 EmberJS 中如何将属性从一个组件传递到另一个组件？

Question

我有一个组件，它有一个 anchor 标签点击，可以打开一个模式，并且在模型中是一个 youtube 。当模式打开时，我希望更改 Youtube url 中的 id 以播放正确的视频，但我无法弄清楚如何完成此操作。我添加了带有我需要的 id 的数据属性，并希望将其传递到组件中以将其添加到 url 中。我在想我可以更新组件 JS 文件中的 id。

src="https://www.youtube.com/embed/{{id}}?rel=0&showinfo=0"

下面是 Handlebars 模板和 JS。

{{#bs-modal-simple open=modal1 title="Simple Dialog" size="lg" position="center" onHidden=(action (mut modal1) false)}}
  {{yt-ad-videos}}
{{/bs-modal-simple}}

JS:

import Component from '@ember/component';
export default Component.extend({
  click(evt){
    let ytId = evt.target.getAttribute('data-id');
    this.set('id', ytId);
  },
  id: null,
  actions: {
    openModal() {
      this.get('onOpen')();
    }
  }
});

Answer 1

嗯，你从哪里得到数据？这段代码没有多大意义:

click(evt){
  let ytId = evt.target.getAttribute('data-id');
  this.set('id', ytId);
},

你在哪里设置data-id ？

通常你会这样调用你的组件:

{{my-component videoId="TheId"}}

或者动态数据的例子:

{{my-component videoId=model.youtubeId}}

然后里面my-component.hbs您可以将其包装在模式中并使用 videoId .可以直接传videoId到另一个组件。

<button onclick={{action (mut modal1) true}}>Open</button>
{{#bs-modal-simple
  open=modal1
  title="Simple Dialog"
  size="lg"
  position="center"
  onHidden=(action (mut modal1) false)
}}
  {{ember-youtube ytid=videoId}}
{{/bs-modal-simple}}

这里我使用了 ember-youtube组件，因为我不知道你的 yt-ad-videos实现。您需要查看它的内部以弄清楚如何传递 id。

---

旁注:我建议您不要使用 click()组件标签上的事件。改用关闭操作，就像我对 <button> 所做的那样打开模式。