對象沒有從集合中刪除骨幹

Question

這是jsfiddle

什麼我想達到什麼目的？

我想創建一個消息客戶端使用this tutorial, 我在對象被從視圖中刪除的部分。

當我點擊刪除時會發生什麼？

由於某種原因，remove函數被調用，拋出沒有錯誤，什麼都不做。 我確信它與 removeMessage事件中的「removedMessage.attributes」有關，該事件未定義？

的HTML

<!-- BACKBONE TEMPLATE ---> 
    <div id="messages" style="width: 600px"> 
     <form id="addMessage" action="#"> 
      <div> 
       <label for="messageText">Message: </label> 
       <input id="messageText" name="message" type="text" /> 
       <button id="add">Add</button> 
      </div> 
     </form> 
    </div> 

    <script type="text/template" id="messageTemplate"> 
     <button class="delete place-right">delete</button> 

     <a class="list autoWidth <% if(has_been_read) { %> selected <% } %>"> 
      <div class="list-content"> 
       <img src="//www.polyvore.com/cgi/img-thing?.out=jpg&size=l&tid=20774792" class="icon"> 
       <div class="data"> 
        <span class="item-title-secondary fg-gray"><b><%= sender %></b></span> 
       </div> 
        <span class="tertiary-text"> 
         <%= message %> 
        </span> 
      </div> 
     </a> 
    </script> 

的JavaScript

var messagesjson = [ 
     { 
      id: 3, 
      message: "This is the message", 
      sender: "gabriel", 
      receiver: "gabriel", 
      has_been_read: false, 
      has_been_reported: false, 
      created_at: "2014-10-23T19:55:20+0200", 
      is_friend: false 
     }, 
     { 
      id: 5, 
      message: "I'm loving this ", 
      sender: "gabriel", 
      receiver: "gabriel", 
      has_been_read: true, 
      has_been_reported: false, 
      created_at: "2014-10-23T20:02:34+0200", 
      is_friend: false 
     }]; 

    var MessageModel = Backbone.Model.extend({ 
     defaults: 
     { 
      id: null, 
      message: "This is the message", 
      sender: "gabriel", 
      receiver: "gabriel", 
      has_been_read: false, 
      has_been_reported: false, 
      created_at: "2014-10-23T19:55:20+0200", 
      is_friend: false 
     } 
    }); 

    var MessageView = Backbone.View.extend({ 
     tagName: "div", 
     className: "listview", 
     template: $('#messageTemplate').html(), 
     render: function() 
     { 
      var tmpl = _.template(this.template); 
      console.log(this.model); 
      this.$el.html(tmpl(this.model.toJSON())); 
      return this; 
     } 
    }); 

    var MessageCollection = Backbone.Collection.extend({ 
     model: MessageModel 
    }); 

    var MessageCollectionView = Backbone.View.extend({ 
     el: $('#messages'), 
     initialize: function() 
     { 
      this.collection = new MessageCollection(messagesjson); 
      this.render(); 
      this.collection.on("add", this.renderMessage, this); 
      this.collection.on("remove", this.removeMessage, this); 
     }, 
     render: function() 
     { 
      var that = this; 
      _.each(this.collection.models, function(item){ 
       that.renderMessage(item); 
      },this); 
     }, 
     events:{ 
      "click #add":"addMessage", 
      "click .delete": "removeMessage" 
     }, 
     renderMessage: function(item) 
     { 
      var messageview = new MessageView({ 
       model: item 
      }); 

      this.$el.append(messageview.render().el); 
     }, 
     addMessage: function(e) 
     { 
      e.preventDefault(); 
      var formData = {}; 

      $("#addMessage").find("input").each(function (i, el) { 
       formData[el.name] = $(el).val(); 
      }); 

      messagesjson.push(formData); 
      this.collection.add(new MessageModel(formData)); 

      console.log(messagesjson); 
     }, 
     removeMessage: function(removedMessage) 
     { 
      console.log('called function'); 
      console.log("why is this "+removedMessage.attributes+"?"); 
      var removedMessageData = removedMessage.attributes; 

      _.each(removedMessageData, function(val, key){ 
       if(removedMessageData[key] === removedMessage.defaults[key]){ 
        delete removedMessageData[key]; 
       } 
      }); 

      _.each(messagesjson, function(message){ 
       if(_.isEqual(message, removedMessageData)){ 
        messagesjson.splice(_.indexOf(messagesjson, message), 1); 
       } 
      }); 
     } 
    }); 

    var messagecollectionview = new MessageCollectionView(); 

Answer 1

它現在 我重視的事件收集，這意味着「本」在整個集合，而不是單一視圖

指出

單個消息視圖

 var MessageView = Backbone.View.extend({ 
      tagName: "div", 
      className: "listview", 
      template: $('#messageTemplate').html(), 
      render: function() 
      { 
       var tmpl = _.template(this.template); 
       console.log(this.model); 
       this.$el.html(tmpl(this.model.toJSON())); 
       return this; 
      }, 
      removeMessage:function() { 
       //Delete model 
       this.model.destroy(); 
       //Delete view 
       this.remove(); 
      }, 
      events:{ 
       "click .delete": "removeMessage" 
      } 
     }); 

集合

var MessageCollectionView = Backbone.View.extend({ 
      el: $('#messages'), 
      initialize: function() 
      { 
       this.collection = new MessageCollection(messagesjson); 
       this.render(); 
       this.collection.on("add", this.renderMessage, this); 
       this.collection.on("remove", this.removeMessage, this); 
      }, 
      render: function() 
      { 
       var that = this; 
       _.each(this.collection.models, function(item){ 
        that.renderMessage(item); 
       },this); 
      }, 
      renderMessage: function(item) 
      { 
       var messageview = new MessageView({ 
        model: item 
       }); 

       this.$el.append(messageview.render().el); 
      }, 
      addMessage: function(e) 
      { 
       e.preventDefault(); 
       var formData = {}; 

       $("#addMessage").find("input").each(function (i, el) { 
        formData[el.name] = $(el).val(); 
       }); 

       messagesjson.push(formData); 
       this.collection.add(new MessageModel(formData)); 

       console.log(messagesjson); 
      }, 
      events:{ 
       "click #add":"addMessage" 
      }, 
      removeMessage: function(removedMessage) 
      { 
       console.log('called function'); 
       console.log(removedMessage); 
       var removedMessageData = removedMessage.attributes; 

       _.each(removedMessageData, function(val, key){ 
        if(removedMessageData[key] === removedMessage.defaults[key]){ 
         delete removedMessageData[key]; 
        } 
       }); 

       _.each(messagesjson, function(message){ 
        if(_.isEqual(message, removedMessageData)){ 
         messagesjson.splice(_.indexOf(messagesjson, message), 1); 
        } 
       }); 
      } 
     });