Backbone: cómo reutilizar una vista representada durante la carga de la página

Question

Estoy creando un administrador de URL donde el usuario puede marcar sus URL favoritas de la página web y luego administrarlas en carpetas.

1. Durante la carga de la aplicación, represento una vista que muestra la lista de carpetas que el usuario ha creado. Esta vista es invisible en la carga de la página.
2. Entonces el usuario navega a su página de inicio para ver una lista de URL
3. Desde allí, el usuario puede organizar las URL en carpetas
4. El usuario hace clic en el icono 'Mover a carpeta' en la vista URL
5. Quiero mostrar el icono de 'moverse a carpeta' de carpetaLectorView Absolute debajo del icono 'Mover a carpeta'. ¿Cómo puedo hacer eso?
6. Además, si la URL ya se ha trasladado a una carpeta, quiero que aparezca un letrero marcado en la View de carpeta en la carpeta a la que se ha movido la URL.

¿Cómo debo proceder aquí?

Así es como carga la lista de carpetas.

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

Aquí está el código para la vista URL.

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

Puede adjuntar una vista columna a un elemento HTML existente, fácilmente. Todo lo que necesitas hacer es pasar el el Para la vista, en la vista cuando la instancia. la el Puede ser lo que desee, incluido un elemento HTML existente, que se encuentra a través de un selector de jQuery.

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

Esto unirá su vista al #someElementOnThePage Elemento, y luego puedes usarlo como si lo hubieras renderizado tú mismo.

Para más ejemplos, vea mi publicación de blog sobre elaboración progresiva: http://lostechies.com/derickbailey/2011/09/26/seo-and-accessibility-with-html5-pushstate-part--progresive-enhancement-withbackbone-js/