模板沒有觸發事件的骨幹視圖

我在處理事件的視圖時遇到了一些問題。他們根本不開火。的觀點有它的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; 
    } 
});

的觀點是越來越呈現完美畫面，和它的作品只是喜歡它應該。但點擊事件不會觸發。

當我檢查幻燈片視圖對象時，我可以看到它具有包含正確HTML的el對象，包括必須觸發單擊事件的按鈕。

當我登錄視圖的事件，我看到他們設置：

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

來源

2012-04-06 Charlie van der Zwan

我認爲你是從幻燈片視圖複製innerHTML來的應用來看，但不是事件處理程序。你使用jQuery嗎？ – 2012-04-06 09:41:02

嘗試this pattern

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

    // ... 
    } 
});

來源

2012-04-06 09:45:45

我已經設置了元素，現在它觸發了事件。但是我對這個模型有兩種看法，現在我只按一次就會發射兩次。如何禁用具有相同事件偵聽器的其他視圖？ – 2012-04-06 09:58:11

不知道爲什麼，但slide.undelegateEvents（）;在主應用程序視圖中做了訣竅，你有什麼想法，爲什麼這個工程？ – 2012-04-06 10:09:08

也許你在同一個el上加載兩次IntroSlideView？ – 2012-04-06 10:21:31

模板沒有觸發事件的骨幹視圖

回答

相關問題