Backbone.js 主干路由器和视图

我已经开始使用Backbone.js，并试图了解如何路由到特定视图。在我的

HTML

中，我有

标记来呈现项目任务的视图

查询

单击链接时，它会将带有

id

的任务附加到

DOM

，但是，单击第二个链接时，它会将该任务附加到上一个链接的下面。我不确定它的最佳实践是否是

$。清空视图，然后调用
show
方法

我的路由器的一个片段：

routes: {
    'project/:id: 'showtasks'
},

showtasks: function(id) {
   Event.trigger('tasks:show', id);
}

任务集合的片段

initialize: function() {
    Event.on('tasks:show', this.show, this);
},

show: function() {
    var task = this.collection.get(id);
    var taskView = new App.Views.Task({ model: task });
    this.$el.append(taskView.render().el);
}

藏品

var tasks = new App.Collections.Tasks([
    {
        id: 1,
        title: 'First Task',
        content: 'Lots of Content...'
    },
    {
        id: 2,
        title: 'Second Task',
        content: 'Lots of Content...'
    },
    {
        id: 3,
        title: 'Third Task',
        content: 'Lots of Content...'
    }
]);

var tasksView = new App.Views.Tasks({ collection: tasks });

主干视图的两种良好设计模式是：


多次调用
render
方法不应有任何副作用。它应该正确渲染

在渲染中使用
append
时，基本上是在渲染方法中设置视图流，这基本上是视图模板的责任


因此我建议您使用此>

this.$el.html(taskView.render().el);

这将非常好地工作，但是如果您有子视图，您将遇到问题。为此
您希望它做什么（一次只显示一个）？触发事件时，调用
$.empty
就可以了。您说这是您的
集合
代码，但看起来它实际上是一个主干
视图
（因为
集合
没有关联的元素（
$el
）。代码看起来是一个
TaskViewViewer
？我不知道
show
功能中的
id
来自何处。。。可能只是没有显示？对不起，是的，这是我的“收藏视图”。我将用集合更新我的问题。最后，我想嵌套集合，这样多个项目与一个项目相关联。您可以清空其中附加到html的任何事件，或者您可以调用它。$el.html（taskView.render（）.el），它将替换当前内容。+1链接到文章，谢谢。我认为每次清空和附加DOM都会有一些开销。