Backbone.js, cannot render view

Question

I try to organize some views like this:

define([
  // Application.
  "app"
],

function(app) {

  var Partials = app.module();

  Partials.classes = {
    'AccountNavStart' : AccountNavStart = Backbone.View.extend({
       template: 'member/account-nav',
       serialize: function(){
         return { model: this.model };
       }
     });

  // Required, return the module for AMD compliance.
  return Partials;
});

Render:

new Popover.Views.Default({ 
    content: new Partials.classes['AccountNavStart']().render().$el
});

However I get an error:

Uncaught TypeError: Cannot call method 'get' of undefined

enter image description here

Any ideas how I get this error? How to fix it?

Chickenrice · Accepted Answer · 2013-07-03 07:41:21Z

3

Try this:

EDIT: It's a Backbone Boilerplate app so I update the answer:

The problem is that how to get a view's $el of "Partials" module after it being rendered. I try to define a module and declare a Backbone view as its member. Then I create a instance of view then chain the method call via view.render().$el. It get the view's $el successfully because in Backbone Boilerplate render() has its default behavior. Native backbone render function is designed to be overridden.

My simple example:

Module declaration (modules/user):

define(["app"],

function(app){
    var User = app.module();

    User.Views.Item = Backbone.View.extend({
        template: "user/item",
        tagName: "li",
        serialize: function(){
            return {model: this.model};
        },
        initialize: function(){
            this.listenTo(this.model, "change", this.render);
        }
    });

return User;

});

Item template (templates/user/item.html)

<a href="#"><%=model.get("name")%></a>

Try to get view's $el in Router initialize call

define([
// Application.
"app","modules/user"
],

function(app, User) {

    // Defining the application router, you can attach sub routers here.
    var Router = Backbone.Router.extend({
    initialize: function(){
        app.useLayout("main-layout").setViews({
            ".users":new User.Views.Item({model:new Backbone.Model({"name":"cccc"})})
        }).render();

        //try to access $el. it works
        console.log(new User.Views.Item({model:new Backbone.Model({"name":"cccc"})}).render().$el);
    },
    routes: {
        "": "index",
        "user/:name":"user"
    },

    index: function() {

    },
    user: function(){

    }
    });

    return Router;

});

Finally I got the $el:

$el!

Hope this is helpful to you.

edited Jul 3, 2013 at 7:41

answered Jul 2, 2013 at 9:10

Chickenrice

5,7372 gold badges24 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

jbl Over a year ago

Good point : backbonejs.org/#View-render "A good convention is to return this at the end of render to enable chained calls."

DarkLeafyGreen Over a year ago

Ok the error is gone, however now it does not render the template but just a empty div. Any ideas why? Render is triggered but it does not render the template

Chickenrice Over a year ago

I have modified the answer the render function will render the view template from model data.

DarkLeafyGreen Over a year ago

I get an error Uncaught TypeError: Cannot read property 'attributes' of undefined

Chickenrice Over a year ago

Answer updated. You have to assign the model when you initiate the backbone view.

|

Collectives™ on Stack Overflow

Backbone.js, cannot render view

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related