2015-10-11 101 views
0

這是我第一次使用主幹,所以我對一切都很困惑。我正在嘗試製作待辦事項列表。一旦我點擊待辦事項的「完成」,我希望它附加到「已完成」列表。骨幹:將模型移動到另一個集合

我一直在關注本教程,並試圖複製代碼(我試圖創建一個新的完成的視圖和類似的東西),我試圖做的時候點擊「完成」它會刪除$ el ,我會添加到已完成的Todos。我認爲這個問題即使被添加,也沒有做任何事情。

done: function() { 
var completed = new CompletedTodo({ 
    completedTask: this.$('.task').html(), 
    completedPriority: this.$('.priority').html() 
}); 
completedTodos.add(completed); 
this.model.destroy(); 

},

我把一個調試器那裏,看看它實際添加到集合,當我做completedTodos.toJSON();,它確實給我帶回了新的東西我只是添加。

但是,它不附加到我的收藏列表。

這是我的整個腳本文件,以防萬一我指出任何錯誤。

var Todo = Backbone.Model.extend({ 
    defaults: { 
    task: '', 
    priority: '' 
    } 
}); 

var CompletedTodo = Backbone.Model.extend({ 
    defaults: { 
    completedTask: '', 
    completedPriority: '' 
    } 
}); 

var Todos = Backbone.Collection.extend({}); 

var todos = new Todos(); 

var CompletedTodos = Backbone.Collection.extend({}); 

var completedTodos = new CompletedTodos(); 

//Backbone view for one todo 
var TodoView = Backbone.View.extend({ 
    model: new Todo(), 
    tagName: 'tr', 
    initialize: function() { 
    this.template = _.template($('.todos-list-template').html()); 
    }, 
    events: { 
    'click .finished-todo': 'done', 
    'click .delete-todo' : 'delete' 
    }, 
    done: function() { 
    var completed = new CompletedTodo({ 
     completedTask: this.$('.task').html(), 
     completedPriority: this.$('.priority').html() 
    }); 
    completedTodos.add(completed); 
    this.model.destroy(); 
    }, 
    delete: function() { 
    this.model.destroy(); 
    }, 
    render: function() { 
    this.$el.html(this.template(this.model.toJSON())); 
    return this; 
    } 
}); 

//Backbone view for all todos 
var TodosView = Backbone.View.extend({ 
    model: todos, 
    el: $('.todos-list'), 
    initialize: function() { 
    this.model.on('add', this.render, this); 
    this.model.on('remove', this.render, this); 
    }, 
    render: function() { 
    var self = this; 
    this.$el.html(''); 
    _.each(this.model.toArray(), function(todo) { 
     self.$el.append((new TodoView({model: todo})).render().$el); 
    }); 
    return this; 
    } 
}); 

//View for one Completed Todo 
var CompletedTodoView = Backbone.View.extend({ 
    model: new CompletedTodo(), 
    tagName: 'tr', 
    initialize: function() { 
    this.template = _.template($('.completed-todos-template').html()); 
    }, 
    render: function() { 
    this.$el.html(this.template(this.model.toJSON())); 
    return this; 
    } 
}); 

//View for all Completed Todos 
var CompletedTodosView = Backbone.View.extend({ 
    model: completedTodos, 
    el: $('.completed-todos-list'), 
    initialize: function() { 
    this.model.on('add', this.render, this); 
    }, 
    render: function() { 
    var self = this; 
    this.$el.html(''); 
    _.each(this.model.toArray(), function(completedTodo) { 
     self.$el.append((new CompletedTodoView({model: completedTodo})).render().$el); 
    }); 
    return this; 
    } 
}); 

var todosView = new TodosView(); 

$(document).ready(function() { 
    $('.add-todo').on('click', function() { 
    var todo = new Todo({ 
     task: $('.task-input').val(), 
     priority: $('.priority-input').val() 
    }); 
    $('.task-input').val(''); 
    $('.priority-input').val(''); 
    todos.add(todo); 
    }); 
}); 

在此之後,我還必須弄清楚如何使用Parse來使它堅持數據庫。我想我會首先在骨幹中工作,然後嘗試將其放入數據庫中。我也想使用節點/快遞,這樣會有幫助嗎?我幾乎是一個Ruby on Rails類的人,所以我不知道這些JavaScript框架類型的東西。

感謝您的幫助!

回答

0

好吧,

這只是因爲我沒有初始化該視圖。

var completedTodosView = new CompletedTodosView(); 

固定它。