1

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是否在checkout控制器中或初始化函数中的某些内容。（即时通讯使用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
        }

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

我想知道

还有其他解决方案吗？
或者我完全以错误的方式使用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/

获得

Backbone.js：如何在某些页面上触发某些功能？

1

2

2 个答案: