骨干主体视图未渲染

Question

I've got a stupid mistake somewhere and I cannot make a base backbone view get rendered. Can someone please point me what's wrong in this code?

var view = new Backbone.View({
    el: 'body',
    template: '<p>this is my new template</p>',
    render: function() {
        console.log('rendering myself');
        this.$el.html(this.template);
        return this;
    }
});

view.render();

PS the console.log is empty.

Answer 1

You're syntax is a bit off, you should be first defining your view and then instantiating it.

//define view 
var MyView = Backbone.View.extend({
    el: 'body',
    template: '<p>this is my new template</p>',
    render: function() {
        console.log('rendering myself');
        this.$el.html(this.template);
        return this;
    }
});

//create view instance
var view = new MyView();
view.render();

jsBin

Answer 2

While the conventional way is to extend Backbone.view, and instantiate new instances of a view (per Jack's answer), you can get what you want (instantiating a simple view) by wrapping Backbone.View.extend in parens:

var view = new (Backbone.View.extend({
    el: 'body',
    template: '<p>this is my new template</p>',
    render: function() {
        console.log('rendering myself');
        this.$el.html(this.template);
        return this;
    }
}));

view.render();

jsbin

This can be helpful for "one off" views/routers/etc, that you don't intend reinstantiating multiple times. The method in Jack's answer is more readable (and useful) for most cases.

Answer 3

You have to actually create that view.

Before render: function(){}

Add

initialize: function(){
    this.render();
}

and when you want to load the page / view use this

$(document).ready( function(){
     new view({"el:body});
});

Although normally a view variable should be extended from Backbone view.

So instead of "var view" ... it should be something like window.myView = Backbone.View.extend( { } )

See http://backbonejs.org/#View

It's easier to manage when the views represent objects.