Backbone: how to reuse a view rendered during page load

Question

I am creating an url manager where user can bookmark his favorite webpage URLs and then manage them in folders.

1. During app load, I render a view which shows the list of folders user has created. this view is invisible on page load.
2. then user navigates to his home page to see a list of urls
3. from there, user can arrange the urls in folders
4. user clicks the 'Move to folder' icon in URL view
5. I want to display the folderSelectorView absolute positioned below the 'Move to Folder' icon. How can I do that?
6. Also if the url has already been moved to a folder, I want a checked sign to appear in the folderSelectorView in the folder where the url has been moved to.

How should I proceed here?

Here is how I load the list of folders.

var folderColl = new FolderColl();
new FolderSelectorView({collection: folderColl});

Here is the code for URL view.

URLView = Backbone.View.extend({
    tagName: 'li',
    template: _.template($('#URLTempalte').html()),
    events: {
        'click .FolderChange': 'showFolderSelector'
    },

    initialize: function() {
        _.bindAll(this, 'render');
    },

    render: function() {
        return $(this.el).html(this.template(this.model.toJSON()));
    },

    showFolderSelector: function() {
       // How should I display the view here
       // view should display below the "Move to folder" icon
       // Doing something like `new FolderSelectorView` is not what I'm after
       // since that will just re-render the view for every URL displayed
    }
});

Answer 1

You can attach a backbone view to an existing HTML element, easily. all you need to do is pass the el for the view, into the view when you instantiate it. the el can be anything you want - including an existing html element, found through a jQuery selector.

var myEl = $("#someElementOnThePage");
var myView = new MyView({
  el: myEl
});

This will attach your view to the #someElementOnThePage element, and you can then use it as if you had rendered it yourself.

For more examples, see my blog post on progressive elaboration: http://lostechies.com/derickbailey/2011/09/26/seo-and-accessibility-with-html5-pushstate-part-2-progressive-enhancement-with-backbone-js/