События Magnific popup и Backbone: представление исчезает, когда я добавляю код всплывающего окна Magnific

Я пытаюсь создать событие для представления, которое открывает световой короб, когда я нажимаю тег, но когда я добавляю код всплывающего окна Magnific, представление исчезает.

Вот мой 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);

Я не знаю, связана ли проблема с моим кодом просмотра или с кодом всплывающего окна Magnific.

Спасибо


backbone.js backbone-views magnific-popup
person swayziak    schedule 17.06.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Похоже на синтаксическую ошибку

у вас есть дополнительный набор фигурных скобок, которого там быть не должно.

Здесь 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
         });
      }
person Sushanth --    schedule 17.06.2013
comment
Спасибо, теперь выполняется рендеринг app.BookView. Но теперь у меня есть другая проблема: когда я нажимаю тег ‹a›, чтобы получить доступ к лайтбоксу с видео на YouTube, действие щелчка не показывает лайтбокс. Это ничего не делает. - person swayziak; 18.06.2013
comment
Он показывает одну ошибку: Не удалось загрузить ресурс, потому что я еще не создал маршрутизатор. - person swayziak; 18.06.2013
comment
Проблема связана с этим? - person swayziak; 18.06.2013
comment
Я уже знаю, в чем была проблема. Класс в ‹a› не был таким же, как в коде всплывающего окна Magnific. - person swayziak; 19.06.2013