Как передать атрибут от одного компонента к другому в EmberJS?
У меня есть компонент, у которого есть щелчок по тегу привязки, который открывает модальное окно, а внутри модели находится YouTube. Когда открывается модальное окно, я хочу, чтобы идентификатор в URL-адресе Youtube изменился, чтобы воспроизводить правильное видео, но мне сложно понять, как это сделать. Я добавил атрибуты данных с нужным мне идентификатором и хотел передать это в компонент, чтобы добавить его к URL-адресу. Я думал, что могу обновить идентификатор в файле JS компонента.
src = "https://www.youtube.com/embed/{{я бы}}?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')();
}
}
});
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
гм, откуда вы берете данные? Этот код не имеет особого смысла:
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. Вам нужно заглянуть внутрь, чтобы понять, как передать идентификатор.
Примечание: я рекомендую вам не использовать событие click() в теге компонента. Вместо этого используйте действие закрытия, как я сделал с <button>, чтобы открыть модальное окно.
что именно вы имеете в виду под якорные теги? Вы, кажется, не совсем понимаете концепцию компонента. Возможно, также посетите канал #help Slack сообщества ember для обсуждения.
Стандартный тег привязки. <a href = ""> текст </a> Я использую его для открытия модального окна. При щелчке по тексту открывается модальное окно. У меня есть модальное открытие, но мне нужно передать этот конкретный идентификатор, чтобы воспроизвести это конкретное видео. Имеет ли это смысл?
Не совсем. вы можете предоставить трепетать?
Я использую ember-bootstrap.com/#/components/modal, но вместо того, чтобы открывать его с помощью кнопки, я открываю модальное окно с помощью элемента тега привязки. Я добавляю свой YouTube iFrame в модальное окно. Я создал YouTube iFrame как собственный компонент, и при открытии модального окна необходимо воспроизвести другое видео в зависимости от того, какой элемент был нажат. т.е. <a href = "#" data-id = "some video id"> воспроизвести первое видео </a> или <a href = "#" data-id = "some video id"> воспроизвести второе видео </a> и т. д. Я хочу обновить идентификатор в URL-адресе YouTube, чтобы воспроизвести соответствующее видео.
не делай этого. вы должны делать это тлеющим углем. постараюсь обеспечить минимальный тиддл и я постараюсь исправить.
Взгляните на это. (Он не работает из-за вращающейся песочницы, но в реальном проекте он должен работать так)
Только начал изучать Ember и работать над небольшим проектом, чтобы познакомиться. Я работал с индексным файлом, поэтому мне пришлось добавить контроллер. Добавление контроллера решило мою проблему. Спасибо за помощь.
Добавление контроллера для индекса позволило мне передать необходимые данные и решить мою проблему.
У меня есть идентификаторы, жестко запрограммированные в тегах привязки, а модальный - от ember-bootstrap. data-attribute = "video is here" в одном компоненте, а затем добавление iFrame YouTube в модальное окно через другой компонент. Есть ли лучший подход к настройке?