Backbone.js：如何在特定页面触发特定功能？

Question

我正在建立一个电子商务网站。

我想使用backbone.js和backbone.localStorage.js实现购物车系统和结账程序系统

它不是 SPA（单页应用程序）。

我将整个网站理解为一个应用程序，因此我将所有 javascript 代码写在一个文件中。

在文件中，我这样写：

var Item = Backbone.Model.extend({
    //blah 

var ItemList = Backbone.Collection.extend({
    //blah

var Cart = Backbone.View.extend({
    showItems: function(){
        //blah
    },
    //blah

var OrderModel = Backbone.Model.extend({
    //blah

var Order = Backbone.View.extend({
    //blah

var AppView = Backbone.View.extend({
    el: "body",
    initialize: function() {
        console.log('app initialized');
        var items = new ItemList;
        var cart = new Cart({collection: items});
        var orderModel = new OrderModel({id: 1});
        var order = new Order({ model: orderModel });
    }
});

var App = new AppView;

购物车视图中有一个 showItems 函数。

当用户进入结账页面时我应该如何触发这个功能？

我想出了两种方法来做到这一点

1

检测当前 url 是否在结帐控制器或初始化函数中。 （我使用 php codeigniter）

var Cart = Backbone.View.extend({
    initialize: function(){
        if (document.URL.split('/')[1]=='checkout'){
            this.showItems(); 
        }
    }

2

在结帐页面中放置一个隐藏的输入

<input type='hidden' name'action_type' val='checkout' />

并在初始化函数中检测它。

var Cart = Backbone.View.extend({
    initialize: function(){
        if ($('input[name="action_type"]')=='checkout'){
            this.showItems(); 
        }
    }

但无论哪种方式对我来说都有点难看。 因为如果我需要根据某些页面触发许多不同的功能，那么初始功能会是这样的

var Cart = Backbone.View.extend({
    initialize: function(){
        if ($('input[name="action_type"]')=='checkout'){
            this.showItems(); 
        else if ($('input[name="action_type"]')=='filling_order_information'){
            //blah
        }
        else if ($('input[name="action_type"]')=='confirm_bill'){
            //blah
        }

这对我来说很难看，我认为这不是初始化函数应该做的。这不是初始化，这是一个选择过程。应该有另一个地方进行选择过程。

我想知道

1. 还有其他解决方案吗？

2. 或者我完全以错误的方式使用了backbone.js。因为我不应该将整个网站理解为一个应用程序。如果是这样，如何在我的情况下以适当的方式使用backbone.js？

感谢任何回复。

谢谢大家，我很抱歉我的英语不好。

Answer 1

我想也许你可以使用 Backbone.Router 。

您可以为不同的用途创建不同的视图。比如

var cartItem=new Backbone.View.extend({
initialize: function(){
    this.render(); 
}
var orderInfomation=new Backbone.View.extend({....})

然后你可以使用创建一个路由器来渲染不同的视图。

Answer 2

你有没有尝试过类似 Backbone.Marionette 的东西，它有一种更有条理的方式来为你初始化整个东西？ Backbone.Marionette 可通过http://marionettejs.com/

获得