1

I know this has been asked before but I couldn't find the right answer, even though it's pretty simple:

I have this in my HTML template:

<div id="vid"></div>
<button class="mdk-close">x</button>

and this in my View:

function (App, Backbone, ArtistVideos, Artistimg, Artistname) {

    var ArtistVideoPopup = App.module();

    ArtistVideoPopup.View = Backbone.View.extend({
        template: 'artistYoutubeVideo',
        events: {
            "click .mdk-close": "test"
        },
        test: function() {
            alert('dasdasas')
        },  
        beforeRender: function() {
            var artistimgCollection = new Artistimg.ArtistimgCollection();
            artistimgCollection.artist_id = this.artist_id;
            this.insertView('.artistImage', new Artistimg.View({collection: artistimgCollection}));
            artistimgCollection.fetch();

            var artistnameCollection = new Artistname.ArtistnameCollection();
            artistnameCollection.artist_id = this.artist_id;
            this.insertView('.artistName', new Artistname.View({collection: artistnameCollection}));
            artistnameCollection.fetch();

            var artistvideosModel = new ArtistVideos.ArtistVideosModel();
            artistvideosModel.artist_id = this.artist_id;
            artistvideosModel.video_youtube_id = this.video_youtube_id;
            artistvideosModel.fetch();
        },      

        afterRender: function() {

            $('ul.acmenu li a.selected').removeClass('selected');
            $('ul.acmenu li a.artistVideos').addClass('selected');

            var tag = document.createElement('script');
            tag.src = "https://www.youtube.com/iframe_api";
            var firstScriptTag = document.getElementsByTagName('script')[0];
            firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

            var player;
            window.onYouTubeIframeAPIReady = _.bind(function() {
              player = new YT.Player('vid', {
                height: '480',
                width: '853',
                videoId: this.video_youtube_id,
                events: {
                  onReady: onPlayerReady,
                  onStateChange: onPlayerStateChange
                }
             })
            }, this);

            function onPlayerReady(event) {
                event.target.playVideo();
            }

            var done = false;
            function onPlayerStateChange(event) {
                // if (event.data == YT.PlayerState.PLAYING && !done) {
                    // setTimeout(stopVideo, 6000);
                    // done = true;
                // }
            }
            function stopVideo() {
                player.stopVideo();
            }


        },



    });

    return ArtistVideoPopup;
}

but the event is not firing at all. Does anyone know what might be the issue?

Thanks in advance...

14
  • Sounds to me like you have some other JS errors that are preventing the browser from parsing this code. The code you posted here looks fine to me. Are you seeing any errors in your JS console?
    – Lix
    May 7, 2014 at 9:53
  • @Lix no, there are no errors, which is what makes me wonder...
    – SHT
    May 7, 2014 at 9:54
  • The code you have posted is 100% valid. The problem has to be with something else in your code.
    – Lix
    May 7, 2014 at 9:56
  • @Lix OK! is it maybe because the button not is rendered by the view and just hardcoded in the html template?
    – SHT
    May 7, 2014 at 9:59
  • for sure! The event will only be fired for elements that are associated with the specific view... You said that "I have this in my HTML template" so I assumed that the HTML is associated with the view...
    – Lix
    May 7, 2014 at 9:59

1 Answer 1

1

The events in your view are bound only to elements inside the view.el

1
  • But how come that in another view I have, which is build the same way, I have added events: {'click .somelink':'dostuff'}, dostuff:function(){do stuff} and that works well? In that view i also have template: 'some_template and in the html template there is basic HTML???
    – SHT
    May 8, 2014 at 12:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.