backbone.js當點擊添加新的DOM元素時點擊事件不會觸發

Question

我寫了一個簡單的程序來創建表單發佈。當創建新帖子時，標題將被添加到文檔中，並且當點擊標題時，點擊活動並顯示警報。當我創建另一篇文章的標題也顯示了第一篇文章的標題，但是，沒有人點擊時彈出警告。

var PostModel = Backbone.Model.extend({ 
      defaults: { 
       "title": "", 
       "postTxt":"" 
      } 
     }); 

     <!-- Collection --> 

     var PostCollection = Backbone.Collection.extend({ 
      url: '/UserPosts', 
      model: PostModel 
     }); 

     <!-- Views --> 

     var PostModelView = Backbone.View.extend({ 
      model: new PostModel(), 
      tagName: 'li', 
      template: _.template($('#post-title').html()), 
      initialize: function() { 
       console.log('Initialized PostModelView........'); 
      }, 
      events: { 
       'click a' : 'showAlert' 
      }, 
      showAlert: function(){ 
       console.log('event'); 
       alert("You clicked : " + this.model.get('title')); 
      }, 
      render: function() { 
       console.log('Running render() of PostModelView.....'); 
       var htmloutput = this.template(this.model.toJSON()); 
       this.$el.html(htmloutput); 
       return this; 
      } 
     }); 

     var postmodelview = new PostModelView(); 
     var postcollection = new PostCollection(); 

     var PostCollectionView = Backbone.View.extend({ 
      collection: postcollection, 
      tagName: 'ul', 
      initialize: function() { 
       console.log('Initialized PostCollectionView .......'); 
       this.collection.on('add', this.render, this); 
       this.collection.on('remove', this.render, this); 
       console.log('postcollectionview $el: ' + this.$el.html()); 
      }, 

      render: function() { 


       this.collection.each(function(postmodel) { 
        console.log(JSON.stringify(postmodel)); 
        var postmodelview = new PostModelView({model: postmodel}); 
        console.log(JSON.stringify(postmodelview)); 
        //var htmlout = postmodelview.render().$el; 
        var htmlout = this.$el.append(postmodelview.render().$el); 
        $('#postcontainer').html(''); 
        $('#postcontainer').append(htmlout); 
        //this.$el.append(htmlout); 

       },this); 

       return this; 

      } 
     }); 



     function createPost() { 

      var postcollectionview = new PostCollectionView(); 
      console.log('running creatPost()'); 
      var postmodel = new PostModel({ title: $('#title').val(), postTxt: $('#postTxt').val() }); 
      postcollection.create(postmodel); 
      console.log("postcollection: " + JSON.stringify(postcollection.toJSON())); 
      $('#title').val(''); //clears the input field 
      $('#postTxt').val(''); // clears the input field 

     } 

Answer 1

讓我們在這仔細一看：

var htmlout = this.$el.append(postmodelview.render().$el); 
$('#postcontainer').html(''); 
$('#postcontainer').append(htmlout); 

append，最喜歡的jQuery函數，返回它的接收器，讓htmlout是this.$el。這意味着您要重複清除#postcontainer的內容並將this.$el重新放入其中。

html('')是做什麼用的？從fine manual：

當.html()用於設置元素的含量，這是該元素的內容完全被新的內容所取代。此外，在用新內容替換那些元素之前，jQuery 從子元素中刪除了其他構造，如數據和事件處理程序。

強調我的。所以，當你每次：

$('#postcontainer').html(''); 

你從#postcontainer的孩子們移除所有的事件處理程序，尤其是，你從this.$el刪除所有的事件。

你不應該做任何的這些東西：

render: function() { 
    this.collection.each(function(postmodel) { 
     var postmodelview = new PostModelView({model: postmodel}); 
     this.$el.append(postmodelview.render().$el); 
    }, this); 
    return this; 
} 

：

$('#postcontainer').html(''); 
$('#postcontainer').append(htmlout); 

這種觀點應該只是添加子視圖的其el，讓來電者把頁面上的某個地方的el

然後在主叫方：

var postcollectionview = new PostCollectionView(); 
//... 
#('#postcontainer').append(postcollectionview.render().el); 

各種其他問題：

1. 在視圖上的原型設置model屬性：

   var PostModelView = Backbone.View.extend({ 
       model: new PostModel(), 
   

   不使一個很大的意義。視圖的每個實例通常都有它自己的model，並且應該在實例化視圖時提供。

2. 同樣設置在視圖上的collection屬性：

   var PostCollectionView = Backbone.View.extend({ 
       collection: postcollection, 
   

   你通常設置collection當你實例化視圖：

   var v = new PostCollectionView({ collection: post collection }); 
   

3. 您在不同的有兩個不同的postmodelview變量範圍，最高級的幾乎肯定是一個錯誤。

4. 您使用labels在createPost底部，但唱片公司不作在這方面任何意義，我想你的意思是說僅此：

   $('#title').val(''); // clears the input field 
   $('#postTxt').val(''); // clears the input field 
   

演示：https://jsfiddle.net/ambiguous/tqdf2j0v/