CODEWITHSUNDEEP
javascriptbackbone.jsweb
尤川豪
尤川豪

Reputation: 479

Backbone.js: how to trigger certain function on certain page?

im building an e-commerce website.

i want to implement the shopping cart system and checkout procedure system using backbone.js and backbone.localStorage.js

it's not a SPA(single page application).

i understood the whole website as one application so i write all the javascript codes in one file.

in the file, i write something like this:

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;

there's a showItems function in the cart view.

how should i trigger this function when user going to the checkout page?

i thought out two ways to do this

1

detect the current url is in checkout controller or something in the initialize function. (im using php codeigniter)

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

2

put a hidden input in the checkout page 

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

and detect it in the initialize function.

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

but either way is a little bit ugly to me. because if i need to trigger many different functions according to certain pages, then the the initial function would be like this

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
        }

which is ugly to me, and i think it's not what an initialize function should do. this's not initialization, it's a choosing process. there should be another place to do the choosing process.

i want to know

  1. is there any other solutions?

  2. or i totally use backbone.js in a wrong way. because i shouldn't understood the whole website as one application. if so, how to use backbone.js in a proper way in my situation?

im appreciate for any replies.

thank you all and im sorry for my poor english.

Upvotes: 1

Views: 156

Answers (2)

garrygu
garrygu

Reputation: 46

I think maybe you can use Backbone.Router .

You can create different view for different usage. such as 

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

And then you can use create a Router to render different view.

Upvotes: 2

Ian Lim
Ian Lim

Reputation: 4284

Have you tried something like Backbone.Marionette which got a more structured way to initialize the whole thing for you? Backbone.Marionette is available at http://marionettejs.com/

Upvotes: 0

Related Questions