Geek asks and answers

What is the recommended way to insert views?

I would like to know what is the recommended way of nesting Backbone Views.

Possible ways to insert views:

  • Display all views and combine them in a router
  • Let IndexView do all the nesting that gets called in the router
  • Include views in underline patterns

I tried my luck already in this fiddle: http://jsfiddle.net/m48Nc/2/

Summary: I know that the example does not work, it just shows the structure, I found out now, but I'm not happy with it.

So which way to go? Links are also welcome;)

UPDATE:

Using the answers of fguillen and another thread that I found, we can do:

var IndexView = Backbone.View.extend({

    tagName: "div",

    className: "container",

    template: LayoutTemplate,

    render: function() {
        this.$el.html(LayoutTemplate);

        this.$('div.content').html(ContentTemplate);
        this.$('div.sidebar').append(new LoginView().render().el);
        this.$('div.sidebar').append(new RegistrationView().render().el);

        return this;
    }

});
+5
source share
2 answers

. Model.attributes.

MenuView. HTML DOM MenuView, DOM View.el :

var menuView = new MenuView({ el: "#menu" });

subViews MenuView jQuery append, html jQuery :

// code simplified and not tested
var MenuView = Backbone.View.extend({
  render: function(){
    // the this.$el is already rendered

    // list of elements
    this.collection.each( function( model ){
      var modelView = new ModelView({ model: model });
      this.$el.append( modelView.render().el );
    }, this);

    // additional subViews
    var loginView = new LoginView();
    this.$el.find( "div#login" ).html( loginView.render().el );

    // another way to add subViews
    var loginView = new LoginView({ el: this.$el.find( "div#login" ) });
    loginView.render();
  }
});
+2

More articles:


All Articles