backbone.js - traductor - Backbone y document.title

backbone traductor

Question

Estoy creando una aplicación de una sola página con backbone.js y me gustaría saber la mejor manera de manejar el cambio de título. Estaba pensando en tener una opción de ''título'' en la vista y hacer que el enrutador (de alguna manera) configure el document.title. ¿Alguien ha implementado algo similar? Gracias

Answer 1

¿Por qué todos usan jQuery para cambiar el título del documento en lugar de usar Javascript puro? Más rápido, más fácil, más limpio ...

document.title = ''new title'';

Answer 2

¿por qué no utilizar la naturaleza con eventos de Backbone.js.

En primer lugar, no creo que sea responsabilidad del Enrutador delegar la actualización del Título del documento. Especialmente si está trabajando con aplicaciones más grandes del lado del cliente, desea que sea sencillo y asegurarse de que cada parte de su aplicación cumpla con una tarea específica.

El router está ahí para delegar rutas, nada más.

lo que sugeriría en su lugar es (según cómo inicialice su aplicación) crear un agregador de eventos a nivel de aplicación.

var app = new Application();
app.eventAggregator = _.extend({}, Backbone.Events);

y vincular un evento a su aplicación como tal:

app.eventAggregator.on(''domchange:title'', this.onDomChangeTitle, this);

donde en tu aplicación construyes

onDomChangeTitle: function (title) 
{
   $(document).attr(''title'', title);
}

y ahora, en lugar de tener que dejarlo en el enrutador para obtener siempre el título y asegurarse de que exista el método getTitle en cada vista, puede, dentro de su vista y, por lo tanto, CUALQUIER vista, desencadenar el siguiente evento cuando renderice o inicialice el ver:

app.eventAggregator.trigger(''domchange:title'', this.title);

En mi opinión, hace que el código sea más limpio y sencillo, pero, de nuevo, es solo una opinión.

Answer 3

Esto es lo que hago este mi proyecto:

var App = {};

App.HomeView = Backbone.View.extend({
  documentTitle: ''my site title''
})

var Router = Backbone.Router.extend({
  routes: {
      '''':    ''home''
    , ''home'': ''home''

, baseTitle: '' - my site''

, home: function(actions) {
    var obj = this;
    obj._changePage(''HomeView'');
  }

, changeTitle: function(title, withoutBaseTitle) {
    var obj = this;

    if(withoutBaseTitle !== true)
      title += obj.baseTitle;

    document.title = title;
    return obj;
  }

, _changePage: function(viewName, viewOptions) {
    var obj = this;
    var page = App[viewName]();

    if(typeof page.documentTitle !== ''undefined'') {
      obj.changeTitle(page.documentTitle);
    }
  }

})

Answer 4

Un post muy antiguo, pero le daré una reencarnación más.

Con la actual Marionette v3.2.0 puedes hacer lo siguiente:

// Get title from view where we manage our layout/views
var viewTitle = view.triggerMethod(''page:title'');

En tu opinión, estás creando ese método mágico como este:

Mn.View.extend({
    onPageTitle() {
        return [''User'', this.model.get(''id'')].join('' | '');
    }
});

Y una resolución de título en sí puede ser la siguiente:

document.title = !!viewTitle
        ? (
            _.isArray(viewTitle)
                ? [baseTitle].concat(viewTitle)
                : [baseTitle, viewTitle]
          ).join('' / '')
        : baseTitle ;

Permite la resolución de títulos devueltos como matrices e implosiones por un solo separador.

• Se puede integrar fácilmente en el flujo de trabajo de la aplicación en el lugar donde administra sus programas de contenido.
• onPageTitle a onPageTitle en el contexto de la vista ( this será la instancia de la vista dentro de la función ), lo que brinda la posibilidad de invocar datos del modelo y cualquier cosa relacionada con la vista.
• No hay necesidad de preocuparse por verificar la disponibilidad del método, solo llame y listo.
• Además, siempre puede volver al título predeterminado si no se define tal método como triggerMethod devolverá undefined en tales casos.
• ¡Lucro!

Answer 5

Yo sugeriría simplemente colocar el código en las devoluciones de llamada de su enrutador. Será otra línea de código, pero sin el conocimiento de la vista actual, el enrutador / aplicación no sabrá qué vista tiene el título correcto. (Realmente no hay un buen lugar para anular el comportamiento y proporcionar un título de documento sin reemplazar algunas funciones integradas en Backbone.JS).

Usted podría agregar algo a su vista de manera muy simple:

var PeopleView = Backbone.View.extend({
    title: ''People are People'',
    //
    //or 
    //
    getTitle: function () {
        return "Something Dynamic";
    }
});

Y luego en su callback enrutador:

var v = new PeopleView();
$(document).attr(''title'', v.getTitle());

Otra opción sería tener la Vista configurada cuando se crea o cuando se llama a un método especial. Pero, yo usaría la primera opción.