0

我正在使用 Backbone 为我的 RESTful API 编写前端......到目前为止我真的很喜欢它。学习这个框架仍然非常有趣。然而，我现在被一些事情难住了，至少对我来说，它应该是直截了当的。

我现在有一个（也是唯一的）html 页面，主应用程序所在的页面列出了一个或多个产品。而且，假设它位于此处：http://localhost/index.html

我希望能够从产品列表视图切换到新产品视图（通过顶部按钮上的点击事件）。而且，据我了解，我需要开始使用路由器进行切换，使用如何使用 Backbone.js 切换视图中描述的模式。

  1. 我需要做什么来切换视图来实现这种行为？
  2. 这看起来很古怪： 

    http://localhost/index.html#product/new

    而且，由于我使用 [tornado](http://tornadoweb.org) 作为我的 API 和静态内容的 Web 服务器，我不能轻易地实现重写规则。我可能会在不久的将来改用 nginx 来处理静态内容，但我还没有。如果我要使用路由器来切换视图，例如从审查到创建（ CRUD操作）时，我如何更改 URL/URI 以使其看起来更像这样

    http://localhost/product/new
4

2 回答 2

3

为了接收无哈希 url 更改，您的浏览器必须支持 pushstate。如果我没记错的话，如果您的浏览器不支持 pushstate，Backbone 将回退到使用散列。为了在应用程序中使用 pushstate，您将使用以下内容初始化您的路由器：

Backbone.history.start({pushState: true})

我喜欢@alexanderb 对视图切换的使用。只需确保在更改视图时正确处理它们。否则你会遇到一些难以调试的复杂问题。在这里阅读更多。

于 2012-09-03T14:33:54.757 回答
1

是的，您需要两件事 - Router 和 ApplicationViewManager（一些类，负责更改视图）。

define(function () {

var ViewManager = function () {
    return {
        show: _showView
    };
};

function _showView(view) {
    if (this.currentView) {
        this.currentView.close();
    }

    this.currentView = view;
    this.currentView.render();

    $("#app").html(this.currentView.el);
}

return ViewManager;

});

在路由器中，您可以执行以下操作：

// router
var ApplicationRouter = Backbone.Router.extend({

    initialize: function () {
        this.viewManager = new ViewManager();
    },

    routes: {
        '': 'dashboard',
        'configure/sites/:id': 'configure'
    },

    dashboard: function () {
        var app = require('./apps/DashboardApp');
        app.run(this.viewManager);
    },

    configure: function (id) {
        var app = require('./apps/ConfigureApp');
        app.run(id, this.viewManager);
    }

});

一些代码示例，您可以从此存储库中获取。

于 2012-09-03T08:32:09.097 回答