骨干路由器创建多个视图，导致多个事件绑定到同一个视图答案

【问题标题】：Backbone router creates multiple views which causes multiple events to bind to the same view骨干路由器创建多个视图，导致多个事件绑定到同一个视图
【发布时间】：2012-02-20 20:27:50
【问题描述】：

我是backbone.js 的新手，我试图了解路由、视图等的工作原理，但现在我遇到了为同一视图构建事件的问题。这是一个剪辑，可以准确地向您展示我的意思。 http://screencast.com/t/QIGNpeT2OUWu

这就是我的主干路由器的样子

var Router = Backbone.Router.extend({

    routes: {
        "pages": "pages",
    }
    pages: function () {
        var page_view = new PageView();
    }
});

所以当我点击 Pages 链接时，我会创建一个新的 PageView，这就是我正在使用的代码

PageView = Backbone.View.extend({
    el: $("#content"),
    initialize: function () {
        $.ajax({
            url: '/pages',
            success: function (data) {
                $("#content").html(data);
            }
        });
    },
    events: {
        "click td input[type=checkbox]": "updatePublishedStatus"
    },
    updatePublishedStatus: function (event) {
        console.log('update publish status');
    }
});

我猜这很基本，但正如您在每次导航到 /pages 时在剪辑中看到的那样，我会在复选框中注册另一个事件。

【问题讨论】：

标签： javascript backbone.js backbone-events

【解决方案1】：

这里有一些问题。

您的视频表明页面是一个很好的集合，Pages。 Pages 是一个 Backbone.Model，具有页面名称、slug、已发布等属性......你缺少这些，它会受到伤害。您不应该只加载一些 html 并将其推送到您的 DOM，这违背了使用 Backbone 的全部目的。
如果您确实为页面创建了模型，它将有一个视图。然后您的 /pages 路由将显示 Collection Pages 等的视图。
您不会在视图的初始化中获取数据，而是通过pages.fetch(); 获取数据，其中 pages 是Pages 集合的一个实例。这可能在您初始化路由器之前发生。
通过视图更改属性时，将更新各个模型。

附带说明：在初始化时获取数据并不是很好。您可以在实际获取数据之前调用 render() ，但这并不好玩。此外，您可以使用视图的 $el 来代替 $('#content')。如this.$el.html(...);

【讨论】：

好的，我知道应该使用模型和集合。我使用 asp.net mvc，当调用 /pages 时，我只返回一个包含所有 html 和数据的局部视图，因为如果我不使用局部视图，我还没有弄清楚如何使它在启用或不启用 javascript 的情况下工作.您是否有使用 asp.net mvc 创建富 Web 应用程序的经验，该应用程序也不显眼且无需启用 javascript 即可工作？
没有人对不起我没有，我喜欢我的 python ;) 但是如果你的目标是制作一个不依赖于 javascript 的应用程序，并且忽略在 Backbone 视图后面有模型的想法，您可能应该首先重新考虑使用 Backbone。
好吧，我明白了:) ...我想我会想出一个解决方案，我同意你的观点，我应该使用模型和集合。
在获取数据之前渲染有那么糟糕吗？如果视图呈现为空，然后在触发“重置”事件时重新呈现或更新，那还不错。
@PaulHoenecke 不，那是次要的，但至少它需要绑定才能重置。

【解决方案2】：

将var page_view = new PageView() 移动到Router.pages() 之外。

让PageView.initialize() 成功回调将data 保存到一个变量中。在PageView 或模型中。

将render 函数添加到设置$("#content").html(data); 的PageView。

在Router.pages() 内致电page_view.render()。

【讨论】：

在这种情况下，可以在获取数据之前调用render。