主干路由器创建多个视图，从而导致多个事件绑定到同一视图

Backbone router creates multiple views which causes multiple events to bind to the same view

本文关键字：视图 事件 绑定 路由器 创建      更新时间：2023-09-26

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

这就是我的主干路由器看起来像的样子

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

所以当我点击页面链接时，我会创建一个新的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');
    }
});

我想这很基本，但正如你在剪辑中看到的，每次我导航到/页面时，我都会在复选框中注册另一个事件。

这里出现了一些问题。

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

顺便说一句：初始化时获取数据并不好。您可以在实际获得数据之前调用render（），这并不有趣。此外，您可以使用视图的$el来代替$('#content')。如this.$el.html(...);

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

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

在PageView中添加一个render函数，用于设置$("#content").html(data);。

在Router.pages()中调用page_view.render()。

相关文章：