Backbone Router not working to display view

Question

I've been spending a lot of time learning Backbone's view's and models. I am now trying to understand routers and how to implement them. I am not quite sure why my router is not displaying the PriceView view.

I would like to display the price that is found in the collections Model when the link is clicked. I am not sure why this is not working.

Here is a fiddle to my code: http://jsfiddle.net/pHXQg/

Here is my JavaScript:

// Model
var TheModel = Backbone.Model.extend({
    defaults: {
        name: '',
        shortDescription: '',
        price: ''
    }
});

// Collection
var TheCollection = Backbone.Collection.extend({
    model: TheModel
});

// Instantiate a new collection and populate it with some data.
var aCollection = new TheCollection({
    name: 'Mustang',
    shortDescription: 'Pretty nice even if it is overpriced',
    price: '9999'
});

// View for the title
var TitleView = Backbone.View.extend({
    el: '.js-title',

    initialize: function () {
        this.collection = aCollection;

        return this;
    },

    render: function () {
        var compiledTemplate = _.template( $('#title').html(), { data: this.collection.toJSON() });
        this.$el.html(compiledTemplate);

        return this;
    }
});

// View for the price
var PriceView = Backbone.View.extend({
    el: '.js-price',

    initialize: function () {
        this.collection = aCollection;

        return this;
    },

    render: function () {
        var compiledTemplate = _.template( $('#price').html(), { data: this.collection.toJSON() });
        this.$el.html(compiledTemplate);

        return this;
    }
});

// Instantiate a new TitleView
var titleView = new TitleView();
titleView.render();

// Router
var TheRouter = Backbone.Router.extend({
    routes: {
        'price': 'price' // #price
    },

    price: function () {
        new PriceView();
    }
});

// Instantiate a new Router
var router = new TheRouter();

// Start browser history
Backbone.history.start();

Here is my HTML and Templates:

<script type="text/template" id="title">
    <h1><%- data[0].name %></h1>
    <a href="#price">Click here to see the price</a>
</script>

<script type="text/template" id="price">
    <p><%- data[0].price %></p>
</script>

<div class="container">

    <div class="row">
        <div class="js-title">

        </div>
    </div>

    <div class="row">
        <div class="js-price">

        </div>
    </div>

</div>

score 1 · Accepted Answer · answered Aug 05 '14 at 01:14

1

The PriceView's render() function is not called automatically by the router.

One way would be to change the router to:

var TheRouter = Backbone.Router.extend({
    routes: {
        'price': 'price' // #price
    },

    price: function () {
        new PriceView().render();
    }
});

answered Aug 05 '14 at 01:14

Patrick M

166
12

Thank you! I have been really trying to understand routing. Does it look like I have implemented it correctly? – Mdd Aug 05 '14 at 01:35
1

For now, your route implementation is pretty basic but the approach is right. I usually have a small chain of action taken when a route is hit which can include, fetch()ing a Model or Collection, rendering a View and start listening to some events from the Model or View. – Patrick M Aug 05 '14 at 01:47
Do you do that chain in the Router? For instance if I were to do something similiar I would have the fetch, render, and listening in the `price` method of the Routher if I understand correctly. – Mdd Aug 05 '14 at 02:28
1

Yes, I would put them there. – Patrick M Aug 05 '14 at 02:36

Backbone Router not working to display view

1 Answers1