Javascript 未从主干中的集合中删除对象
这是 我想要实现什么? 我正在尝试使用创建一个消息客户端, 我正处于一个对象从视图中移除的位置 单击“删除”时会发生什么情况? 出于某种原因,remove函数被调用,不会抛出错误,也不会执行任何操作。 我确信这与上的“removedMessage.attributes”有关 removeMessage事件未定义 htmlJavascript 未从主干中的集合中删除对象,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">
<!-- 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);
}
});
}
});