Представление магистрали с шаблоном, не запускающим события

У меня возникли проблемы с обработкой событий в моем представлении. Они просто не стреляют. В представлении есть html из шаблона, который выглядит так:

<script type="text/template" id="intro-slide-template">
  <div class="slide intro" id="intro-slide">
    <a href="#" class="startpresentation" id="start-btn">
      <%= startpresentation %>
    </a>
  </div>
</script>

Все идет нормально. Сам код представления выглядит так:

  /* ********* Slide View  *********  */
    window.IntroSlideView = Backbone.View.extend({           
        initialize: function(){             
            this.template = _.template($("#intro-slide-template").html());          
        },  
        render: function(){     
            $(this.el).html(this.template(this.model.toJSON()));             
        },
        events: {
            "click #start-btn": "clickHandler"
        },
        clickHandler: function() {
            console.log("IntroSlideView     ::      clickHandler");
        }           
    });

Вот как я отображаю слайд в представлении основного приложения:

/* ********* App View  *********  */
window.AppView = Backbone.View.extend({
    el: $("#content"),
    initialize: function(){
        _.bindAll(this, 'render');      

        //render 
        this.render();
    },
    render: function(){                     
        this.el.innerHTML = "";     
        var slide = this.model.get("currentSlide");
        slide.render();             
        this.el.innerHTML = slide.el.innerHTML;
    }   
});

Представление отлично отображается на экране и работает так, как должно. Но событие клика не срабатывает.

Когда я проверяю объект просмотра слайдов, я вижу, что в нем есть объект el с правильным HTML, включая кнопку, которая должна запускать событие щелчка.

И когда я регистрирую события представления, я вижу, что они установлены:

Object
click #start-btn: "clickHandler"
__proto__: Object

javascript events templates backbone.js
person Charlie van der Zwan    schedule 06.04.2012    source источник
comment
Я думаю, вы копируете innerHTML из представления слайдов в представление приложения, но не обработчики событий. Вы используете jQuery?   -  person miguel_ibero    schedule 06.04.2012

Ответы (1)


arrow_upward
0
arrow_downward

Попробуйте этот шаблон

window.AppView = Backbone.View.extend({
  render: function() {
    this.slide = new window.IntroSlideView({ el: this.$(".slide") });

    // ...
  }
});
person miguel_ibero    schedule 06.04.2012
comment
Я установил элемент, и теперь он запускает событие. Но у меня есть два вида с этой моделью, и теперь я стреляю дважды, нажимая только один раз. Как я могу отключить другое представление с теми же прослушивателями событий? - person Charlie van der Zwan; 06.04.2012
comment
Не знаю почему, но slide.undelegateEvents(); в главном представлении приложения получилось, есть идеи, почему это работает? - person Charlie van der Zwan; 06.04.2012
comment
Возможно, вы загружали IntroSlideView дважды на одном и том же эл? - person miguel_ibero; 06.04.2012
comment
Я загружаю два разных экземпляра слайдов на один и тот же эл. Разве они не должны слушать только свой собственный щелчок #start-btn? - person Charlie van der Zwan; 06.04.2012
comment
События делегируются корневому el представлений, поэтому, если оба представления используют один и тот же el, они оба будут привязаны к этому обработчику событий. - person Jack; 06.04.2012
comment
Кажется логичным, но как привязать событие click к элементу в шаблоне слайда? - person Charlie van der Zwan; 06.04.2012