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 - 在控制器外部觸發屬性

回答

相關問題