Question

我正在尝试使用Backbone.js，并尝试重新配置其中一个标准ToDo教程。

这是我开始使用的todo.js文件（不知道我从哪里得到它）：

$(function(){

    AppView = Backbone.View.extend({

        el: $(".content"),

        events: {
            "keypress #new-todo": "createOnEnter",
        },

        createOnEnter: function(e) {
            if (e.keyCode != 13) return;
            $("#todo-list").append("<li>"+$("#new-todo").val()+"</li>")
            $("#new-todo").val('');
        }

    });

    App = new AppView;

});

我想知道我是否可以弄清楚如何通过路由器运行所有内容，所以我尝试了这个：

$(function(){

    AppView = Backbone.View.extend({

        el: $(".content"),

        initialize: function(options) {
            this.router = this.options.router;
        },

        events: {
            "keypress #new-todo": "createOnEnter",
        },

        createOnEnter: function(e) {
            if (e.keyCode != 13) return;
            var term = $("$new-todo").val()
            $("#todo-list").append("<li>"+term+"</li>")
            $("#new-todo").val('');
            this.router.navigate("stage/"+term);
        },

    });

    // create router
    AppRouter = Backbone.Router.extend({

        initialize: function() {
            // create view when router is initialized
            new AppView({router : this});
        },

        routes: {
            "stage/:stage" : "renderStage"
        },

        renderStage: function(stage) {
            alert(stage);
        }

    });


    App = new AppRouter;

});

但似乎没有任何效果。视图中没有任何事件触发，也没有路由触发。当我在控制台中调试时，我可以访问具有以下参数和方法的App：

_extractParameters
_routeToRegExp
bind
initialize
navigate
route
trigger
unbind
constructor

Answer 1

您的代码有几个问题：

var term = $("$new-todo").val()应为var term = $("#new-todo").val()
您需要将true作为第二个参数传递给router.navigate()，以表示您希望触发路由。
正如 rkw 指出的那样，不要忘记在AppRouter Backbone.history.start();

.initialize()

HERE 是工作代码。

Answer 2

我认为你应该写

this.view = new AppView（{router：this}）;

而不是

新的AppView（{router：this}）;

因为在您的代码中，AppView实例将在创建后立即进行垃圾收集，因为您没有引用它。

初始化路由器内的视图

2 个答案: