Question

我是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');
    }
});

非常基本我想但是你可以在剪辑中看到我每次导航到/页面时我都会在复选框中注册另一个事件。

Answer 1

这里出现了一些问题，与我有点不同;）

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

作为一个侧面：在初始化时获取数据并不是很好。您可以在实际获取数据之前调用render（），这并不好玩。而不是this.$el.html(...);，你可以使用视图的$ el。与{{1}}

Answer 2

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

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

将render功能添加到设置PageView的{{1}}。

在$("#content").html(data);内致电page_view.render()。

Backbone路由器创建多个视图，这会导致多个事件绑定到同一视图

2 个答案: