Clever Geek Handbook

BackBone LayoutManager Re-Render SubViews

I am using BBB with excellent LayoutManager for views. Unfortunately, I cannot find a way to repurpose certain routines. Here's my setup:

Home.Views.Layout = Backbone.Layout.extend({
    template: "home/home",
    el: "#main",
    views: {
        "#left-menu-container": new Home.Views.Leftmenu(),
        "#searchbox": new Home.Views.Searchbox(),
        "#content": new Home.Views.Content()
    }
});

Home.HomeView = new Home.Views.Layout();
Home.HomeView.render();

Home.Views.AddEditPatient = Backbone.View.extend({
    template: "......",
    events: {
        'click .dosomething': 'dosomething'
    },
    dosomething: function(){
        // [dosomething]

        // Only Render Sub-View, e.g. #content here...
   }
});

I don't want to re-render the entire layout, which would be possible by calling Home.HomeView.render () again, but how can I only render the sub-task in this parameter?

+3


source to share


3 answers


I think you want to add something like this with backbone.layoutmanager

thisLayout.setView("#content", new View()).render();



The backbone.layoutmanager v0.6.6 documentation might be helpful http://documentup.com/tbranyen/backbone.layoutmanager/#usage/nested-views

Also check http://vimeo.com/32765088

+2


source


If I understand your question correctly, you can do this in your dosomething function:

this.$("#divToRenderTo").html(new subView().render().$el);


Make sure to return this; at the end of the subquery render function.

0


source


There are two ways that I usually do with the layoutmanager:

  • Create a view in your initialization function and then drop them into the view in beforeRender. This gives your view access to the subzone so you can render it directly.

    initialize: function() {
    this.subview = new SubView();
},
beforeRender: function() {
    this.insertView(this.subview);
},
doSomething: function() {
    this.subview.render();
}

  • You can use view.getView(#selector)

    to return inline view and then call render.

    doSomething: function() {
    this.getView('#content').render();
}
0


source






More articles:


All Articles