backbone.js - Magnific popup and Backbone events: the view disappears when I add the magnific popup code

Question

I'm trying to create an event to a view which opens a light box when I click in the tag, but when I add the magnific pop-up code the view disappears.

Here is my html code:

 <section class="feed"> 

     <script id="bookTemplate" type="text/template">

        <div class="book">

           <a href="<%= video %>" class="video">

               <span><img src="img/go.png" class="go"></span>
               <img src="<%= image %>"/>        
               <h2 class="bookTitle"><%= title %><h2>   

           </a>

        </div>      

    </script>

 </section>

And now my views and some data to test them:

var app = app || {};


app.BookListView = Backbone.View.extend({
    el: '.feed',

    initialize: function ( initialBooks ) {

        this.collection = new app.BooksList (initialBooks);
        this.render();

    },

    render: function() {

         this.collection.each(function( item ){

              this.renderBook( item );

         }, this);

     },

    renderBook: function ( item ) {

          var bookview = new app.BookView ({
               model: item
          })

         this.$el.append( bookview.render().el );
          } 
    });

app.BookView = Backbone.View.extend ({
    tagName: 'div',
    className: 'book', 

    template: _.template( $( '#bookTemplate' ).html()),

    render: function() {
        this.$el.html(this.template(this.model.toJSON()));
        return this;
},

    events: {
        'click .video' : 'popUp'
    },

    popUp: {

        function () {
            $('.popup').magnificPopup({
                 disableOn: 700,
                 type: 'iframe',
                 mainClass: 'mfp-fade',
                 removalDelay: 160,
                 preloader: false,
                 fixedContentPos: false
              });
         }
     }
  });



$(function(){
    var books = [
         {title:'American Psycho', image:'http://2.bp.blogspot.com/ ytb9U3mZFaU/Ti2BcgQHuhI/AAAAAAAAAkM/NMyfgRIFgt0/s1600/american-psycho_44538679.jpg', 
        video:'http://www.youtube.com/watch?v=qoIvd3zzu4Y'},

        {title:'The Informers', 
        image:'http://www.movieposterdb.com/posters/09_03/2008/865554/l_865554_d0038c1c.jpg', 
        video:'http://www.youtube.com/watch?v=g4Z29ugHpyk'}
     ];

 new app.BooksListView (books);

I don't know if the problem is related with my views code or vith the magnific pop-up code.

Thanks

Answer 1

看起来像语法错误

你有一套额外的大括号，不应该出现在那里。

这里popup应该是 aevent handler而不是 aobject hash

popUp: {

        function () {
            $('.popup').magnificPopup({
                 disableOn: 700,
                 type: 'iframe',
                 mainClass: 'mfp-fade',
                 removalDelay: 160,
                 preloader: false,
                 fixedContentPos: false
              });
         }
     }

应该是

popUp: function (e) {
         e.preventDefault();
         $('.popup').magnificPopup({
              disableOn: 700,
              type: 'iframe',
              mainClass: 'mfp-fade',
              removalDelay: 160,
              preloader: false,
              fixedContentPos: false
         });
      }