Ember.js - 在控制器外部触发属性

我正在建立一个音乐网站，其中有多首歌曲，每个都有自己的播放/暂停按钮，然后是一个具有主播放/暂停按钮的全局播放器。我无法弄清楚如何触发计算出的属性，这样当我单击单个歌曲上的播放按钮时，主播放/暂停按钮也会从播放切换为暂停，反之亦然。Ember.js - 在控制器外部触发属性

我有以下代码

Tracks.TrackController = Ember.ObjectController.extend({ 
    currentTime: 0, 
    isLoaded: false, 
    isPlaying:false, 
    songStarted:false, 

    actions: { 

    play: function(){ 
     var track_id = this.id; 
     var mySound = soundManager.createSound({ 
      id: track_id, 
      url: 'https://api.soundcloud.com/tracks/' + track_id + '/stream?client_id=d61f17a08f86bfb1dea28539908bc9bf', 
      autoplay: false, 
      whileplaying: function() { 
       $('#positionBar').css('width', ((this.position/this.duration) * 100) + '%'); 
      }, 
     }); 

     songStarted:true; 
     this.set("isPlaying", true); 
     this.set('mySound', mySound); 
     soundManager.stopAll(); 
     mySound.play(); 

    }, 

    pause: function(){ 
     var mySound = this.get('mySound'); 
     this.set("isPlaying", false); 
     this.set("isPaused", true); 
     if(mySound && mySound.pause){ 
      mySound.pause(); 
     } 
    }, 

    resume: function(){ 
     var mySound = this.get('mySound'); 
     this.set("isPlaying", true); 
     this.set("isPaused", false); 
     mySound.resume(); 
     } 
    } 
});

，并以此为标记：

{{#if isPlaying}} 
     <li class="playBtn pause"><button {{action 'pause' this}} class="play-btn sm2_button" id="masterPlayBtn"></button></li> 
{{else}} 
    {{#if isPaused}} 
     <li class="playBtn"><button {{action 'resume' this}} class="play-btn sm2_button" id="masterPlayBtn"></button></li> 
    {{else}} 
     <li class="playBtn"><button {{action 'play' this}} class="play-btn sm2_button" id="masterPlayBtn"></button></li> 
    {{/if}} 
{{/if}}

我想我需要将动作添加到

Tracks.TracksController = Ember.ArrayController.extend({ 

    });

控制器，但那是我迷路了。我似乎无法弄清楚如何将isPlaying设置为主播放/暂停按钮，并调用操作，以便当我点击主暂停/播放按钮时，它会找到一首特定的歌曲并播放。

来源

2014-06-30 jeanhules

-1

你可以像下面创建控制器对象的层次结构：

Tracks.BaseTrackController = Ember.ObjectController.extend({...}); 

Tracks.TrackController = Tracks.BaseTrackController.extend({...});

有了，你可以把你的基本控制播放暂停功能，并通过底座本身（行动或儿童控制器切换他们根据您的需要）

希望这是有道理的。

来源

2014-06-30 23:08:22 adityap

您需要：

封装了主按钮和个别歌曲
将处理从这里个别歌曲的事件和状态
- 你搞定向上传播单独的歌曲事件的组件的模板
事件从组件冒泡到模板控制器
- 模板控制器通知组件事件
- 在这里，你可以更新主控制
手柄播放/通过结合停止的消息

工作例如：http://emberjs.jsbin.com/dopoho/1/edit?html,js,console,output

我应该已经使用了一个阵列控制器的歌曲列表，我敢肯定，有些用例我没有考虑过。重点是向您展示如何使用组件重用代码以及如何将事件从模板传递到组件然后传递到控制器。

来源

2014-07-01 00:15:02 givanse

您不需要更改单个播放按钮上的操作。只在全局按钮上。

更新TracksController正是如此：

Tracks.TracksController = Ember.ArrayController.extend({ 
    restartTrack: null, // Need to restart with the global button? Use my model! 

    currentTrack: function() { 
    var filtered = this.get('content').filter(function (track) { 
     return this.get('isPlaying'); 
    }); 
    if(Ember.isEmpty(filtered)){ 
     return null; 
    } 
    var track = filtered.objectAt(0); 
    this.set('restartTrack', track); // Should be on the item action... 
    return track; 
    }.property('@each.isPlaying'), 

    isPlaying: function() { 
    return this.get('content').any(function (track) { 
     return this.get('isPlaying'); 
    }); 
    }.property('@each.isPlaying') 
});

所以，现在你TracksController总是知道如果一首乐曲分别改变，并会改变自己的isPlaying。如果您想用全局按钮重新启动歌曲，它也知道要使用哪个音轨...

这只是第一步，而我并不想真正为您编码整个事情。在这一点上你真正需要做的是在你的把手中重构一些内容并更新全局按钮上的动作。

您也可以在某种模板中使用currentTrack，并且每当您更改曲目时它都会重新渲染。非常酷的Ember-tastic的东西。

祝你好运！

来源

2014-07-01 04:20:21

Ember.js - 在控制器外部触发属性

回答

相关问题