Javascript 未从主干中的集合中删除对象

Javascript 未从主干中的集合中删除对象,javascript,jquery,backbone.js,backbone-views,backbone-model,Javascript,Jquery,Backbone.js,Backbone Views,Backbone Model,这是 我想要实现什么? 我正在尝试使用创建一个消息客户端, 我正处于一个对象从视图中移除的位置 单击“删除”时会发生什么情况? 出于某种原因,remove函数被调用,不会抛出错误,也不会执行任何操作。 我确信这与上的“removedMessage.attributes”有关 removeMessage事件未定义 html <!-- BACKBONE TEMPLATE ---> <div id="messages" style="width: 600px">

这是

我想要实现什么?

我正在尝试使用创建一个消息客户端, 我正处于一个对象从视图中移除的位置

单击“删除”时会发生什么情况?

出于某种原因,remove函数被调用,不会抛出错误,也不会执行任何操作。 我确信这与上的“removedMessage.attributes”有关 removeMessage事件未定义

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>
现在可以用了 我将事件附加到集合,这意味着“this”指向整个集合,而不是单个视图

单一消息视图

        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);
                    }
                });
            }
        });
    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);
                    }
                });
            }
        });