我目前正在学习Backbone.js等,而且我有点难以理解如何从集合中获取模型。事实是,我不知道我是否正在以正确的方式将新模型绑定到集合中。这是我的代码:
var app = {};
app.Answer = Backbone.Model.extend({
defaults: {
title: 'Your answer here',
isAnswer: false,
number: 0
}
});
// var answer = new app.Answer();
app.AnswerList = Backbone.Collection.extend({
model: app.Answer,
currentStatus : function(status){
return _(this.filter(function(data) {
return data.get("isAnswer") == status;
}));
},
// localStorage: new Store("backbone-answers")
});
// instance of the Collection
app.answerList = new app.AnswerList();
app.AnswerView = Backbone.View.extend({
tagName: 'li',
template: _.template($('#answer-template').html()),
events: {
'click button.destroy': 'destroy',
'change input.answer-edit' : 'updateLabel',
'click button.edit' : 'editLabel',
'click button.save' : 'saveLabel',
'change input.toggle': 'toggleAnswer',
},
initialize: function(){
_.bindAll(this, 'render','remove', 'unrender', 'updateLabel', 'editLabel', 'saveLabel','toggleAnswer');
this.model.bind('change', this.render);
this.model.bind('destroy', this.unrender);
this.render();
},
render: function(){
$(this.el).html(this.template(
{
title: this.model.get('title'),
isAnswer: this.model.get('isAnswer'),
number: this.model.get('number')
}
));
$(this.el).find('.answer-edit').hide();
$(this.el).find('.save').hide();
return this;
},
unrender: function(){
// console.log('unrender');
$(this.el).remove();
},
destroy: function(){
// console.log('destroy');
this.model.destroy();
},
editLabel: function(e){
$(e.target).hide();
$(this.el).find('.save').show();
$(this.el).find('.answer-text').hide();
$(this.el).find('.answer-edit').show();
},
updateLabel: function(e){
var newText = $(e.target).val();
this.model.set({title: newText});
},
saveLabel: function(e){
$(e.target).hide();
$(this.el).find('.edit').show();
$(this.el).find('.answer-edit').hide();
$(this.el).find('.answer-text').show();
},
toggleAnswer: function(e){
e.stopPropagation();
if($(e.target).val() == 'on'){
this.model.set({ isAnswer: true });
} else {
this.model.set({ isAnswer: false });
}
}
});
app.AppView = Backbone.View.extend({
el: $('#body'),
events: {
'click button#insert-button': 'addAnswer',
'click button#get-answer': 'getAnswer',
},
initialize: function(){
_.bindAll(this, 'addAnswer');
this.collection = new app.AnswerList();
this.counter = 0;
},
addAnswer: function(){
this.counter++;
var answer = new app.Answer();
answer.set({
number: this.counter
});
var newAnswer = new app.AnswerView({model: answer});
$('ul',this.el).append(newAnswer.render().el);
},
getAnswer: function(){
var theAnswer = this.collection.where({isAnswer: true});
console.log(theAnswer);
// alert(theAnswer);
}
});
app.appView = new app.AppView();
我有一个模型,一个集合和两个视图,一个视图处理一段代码(answerView
部分),另一个视图添加答案(并处理集合部分)。因此,当我尝试返回带有this.collection.where({isAnswer: true})
的模型时,它返回一个空数组。事实上,当我尝试只返回整个集合对象时,我似乎并不是它的模型数组中的任何模型。所以,我怀疑我在将新模型插入集合方面做错了。
我怎样才能确定我的系列中有模型,并且我以正确的方式返回指定的模型?有什么想法吗?
答案 0 :(得分:1)
代码看起来是正确的,除了一件事:你实际上并没有将新的Answer模型添加到集合中。尝试在addAnswer
方法中使用collection.add
:
this.collection.add(newAnswer);