1

我是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 时在剪辑中看到的那样，我会在复选框中注册另一个事件。

4

2 回答 2

2

这里有一些问题。

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

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

于 2012-02-20T21:14:45.833 回答
1

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

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

向该集合添加一个render函数。PageView$("#content").html(data);

page_view.render()内调用Router.pages()。

于 2012-02-20T20:34:19.493 回答