Ember 以编程方式在组件之间传递数据答案

【问题标题】：Ember programatically pass data between componentsEmber 以编程方式在组件之间传递数据
【发布时间】：2015-11-28 12:51:50
【问题描述】：

我有两个 ember 组件，一个用于显示视频卡 (video-card)，另一个用于在播放视频时显示视频模式 (video-modal)。我想在 Ember 中实现的是能够将模型当前应该播放的 video 对象传递给 video-modal。至于现在，我无法以某种方式将video 对象从video-card 绑定到video-modal。

/components/video-card.js

import Ember from 'ember';

export default Ember.Component.extend({

    actions: {
        play: function(){
            // outputs video title when video thumbnail is clicked
            console.log(this.get('video').get('title')); 
            Ember.$('#video-modal').openModal();
        }
    }

});

这些组件唯一的共同点是/controller/application.js 控制器，因为这些组件被插入到模板的不同部分：

/tempaltes/application.hbs

{{video-modal}}

/templates/index.hbs

{{#each model.videos as |video|}}
<li>
  {{video-card video=video}}
</li>
{{/each}}

当play()动作被触发时，如何将video对象从video-card动态绑定到video-modal组件？

【问题讨论】：

标签： javascript video ember.js ember-cli

【解决方案1】：

我为此使用了https://github.com/yapplabs/ember-modal-dialog。您可以将 modal-dialog 组件放置在您的视频卡组件内（或在循环中靠近它）并让它们共享该属性。

【讨论】：

我不确定为每个视频呈现模态对话框是否是一个不错的选择。
抱歉，我以为这是目标。在这种情况下，您可能希望通过操作向上传递数据。

【解决方案2】：

有很多方法可以做到这一点。很久以前我用过这个Example。不需要插件来完成这么简单的任务。

【讨论】：