Click here to Skip to main content
15,892,161 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
From my view menuitemdetails.js i'am calling options in app.js - itemDetails

My menuitemdetails.js

XML
var MenuItemDetails = Backbone.View.extend({
    render: function () {
        var markup = '<div>' +
        '<h1>' + this.options.name + '</h1>' +
        '<p><span class="label">' + this.options.category + '</span></p>' +
        '<img src="photos/' + this.options.imagepath + '" class="img-polaroid" />' +
        '</div>';

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


My app.js

C#
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: 'garden-salad.jpg'
            }
        );

        $('#app').html(view.render().el);
    },

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

var app = new AppRouter();

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


Looking forward for an alternative of 'options' in backbone.js 1.1.2
Posted
Comments
Sunasara Imdadhusen 23-Apr-14 9:54am    
for what alternative option you would require
KumarSundeep 29-Apr-14 1:53am    
I was referring to this.options.name 'options' in My menuitemdetails.js
Sunasara Imdadhusen 29-Apr-14 2:20am    
You can directly use this.name or this.category
KumarSundeep 1-May-14 1:52am    
Tried this pal, it shows undefined when I used this.name or this.category it is not picking the name 'Entree' on this.category

1 solution

Hello Tim,

Can you please update your code as per following:

JavaScript
var myModel = {
                name: item,
                category: 'Entree',
                imagepath: 'garden-salad.jpg'
            };
var view = new MenuItemDetails( { model : myModel });

for render function you can use like
JavaScript
render: function () {
        var markup = '<div>' +
        '<h1>' + this.model.name + '</h1>' +
        '<p>' + this.model.category + '</p>' +
        '<img src="photos/' + this.model.imagepath + '" class="img-polaroid" />' +
        '</div>';
 
        this.$el.html(markup);
        return this;
    }
 
Share this answer
 
Comments
KumarSundeep 1-May-14 2:42am    
Hello Sunasara,

Pasted these code in relevant sections. It still does not work. Now it doesn't even show 'Undefined'- the view is not loaded(Guess!!!!)

Thanks.
KumarSundeep 1-May-14 2:53am    
Sorry Pal,
the $('#app').html(view.render().el); was commented. It works.

Thanks.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900