Magnific popup 和 Backbone 事件：当我添加 magnific popup 代码时视图消失

Question

我正在尝试为视图创建一个事件，当我单击标签时会打开一个灯箱，但是当我添加放大的弹出代码时，视图会消失。

这是我的html代码：

 <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>

现在我的观点和一些数据来测试它们：

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);

我不知道问题是与我的视图代码有关还是与华丽的弹出代码有关。

谢谢

Answer 1

看起来像一个语法错误

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

这里的popup 应该是event handler 而不是object 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
         });
      }