javascript - 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;

购物车 View 中有一个 showItems 函数。

当用户转到结帐页面时，我应该如何触发此功能？

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

1

检测当前 url 是在结帐 Controller 中还是在初始化函数中。 (我正在使用 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 。

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

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

然后您可以使用创建一个 Router 来呈现不同的 View 。