CODEWITHSUNDEEP
javascriptbackbone.js
Itay Roisman
Itay Roisman

Reputation: 121

Backbonejs not showing this.options parsed from router

for some reason itemDetails is not parsing the .options in the MenuItemDetails view. This is the javascript code:

// ROUTER

var AppRouter = Backbone.Router.extend({
    routes: {
    "": "list",
    "menu-items/new": "itemForm",
    "menu-items/:item": "itemDetails"
},
list: function(){
    $('#app').html('List screen');
},
itemDetails: function(item){
    var view = new MenuItemDetails (
        {
            name: item,
            category: 'Entree',
            imagepath: 'no-image.jpg'
        }
    );

    $('#app').html(view.render().el);
},
itemForm: function(){
    $('#app').html('New item form');
}
});

// VIEWS

var MenuItemDetails = Backbone.View.extend({
    render: function(){
    var markup = '<div>' +
    '<h1>'+this.options.name+'</h1>' +
    '</div>';

    this.$el.html(markup);
    return this;
}
});

var app = new AppRouter();

$(function() {
Backbone.history.start();
});

The html code is:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://jashkenas.github.io/underscore/underscore-min.js"></script>
<script src="http://jashkenas.github.io/backbone/backbone-min.js"></script>    
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>

<script src="js/views/menuitemdetails.js"></script>
<script src="js/app.js"></script>

<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />

</head>
<body>
<div class="container">
  <h1>Off the Backbone</h1>
    <ul class="nav nav-pills">
        <li><a href="#">Food</a></li>
        <li><a href="#/menu-items/new">Add Item</a></li>
        <li><a href="#/menu-items/garden-salad">Garden Salad</a></li>
    </ul>
  <div class="container" id="app">

  </div>
</div>
</body>
</html>

As you can see, the two first links are doing well but the third one is getting an error which tells that the parameters in itemDetails are not parsed to the view. Please help me with this one here.

Upvotes: 1

Views: 76

Answers (2)

Jonathan Beebe
Jonathan Beebe

Reputation: 5226

Your router works fine. It's the way in which your passing the data from the router into the view that's broken. Here is a working jsfiddle: http://jsfiddle.net/somethingkindawierd/rEa88/

Relevant changes are defining the model

var MenuItemModel = Backbone.Model.extend();

and then passing it into the view

    var view = new MenuItemDetails ({
        model: new MenuItemModel({
            name: item,
            category: 'Entree',
            imagepath: 'no-image.jpg'
        })
    });

then using the model when rendering

'<h1>'+this.model.get('name')+'</h1>'

Upvotes: 1

Trunal Bhanse
Trunal Bhanse

Reputation: 1691

Your router seems confusing : 

    "menu-items/new": "itemForm",
    "menu-items/:item": "itemDetails"

According to this mapping, both of the following will link will map to the itemDetails method : 

    <li><a href="#/menu-items/new">Add Item</a></li>
    <li><a href="#/menu-items/garden-salad">Garden Salad</a></li>

The correct way is to change your router to handle only one route like so : 

"menu-items/:item": "wrapper"

and handle the logic correctly in wrapper : 

wrapper: function(item){
if(item === 'new'){
//handle new
} else {
//handle everything else
}

HTH!

Upvotes: 0

Related Questions