Question

我正在使用backbone.js创建单页应用程序，并想知道处理更改标题的最佳方法。我想在视图中有一个'title'选项，并让路由器（不知何故）设置document.title。有没有人实现类似的东西？感谢

Answer 1

为什么不使用Backbone.js的规范性质。

首先，我不认为由路由器委托更新文档标题。特别是如果您正在使用较大的客户端应用程序，您希望保持简单并确保应用程序的每个部分都能完成特定任务。

路由器在那里委托路由，仅此而已。

我建议的是（取决于您初始化应用程序的方式）来创建应用程序级事件聚合器。

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

并将事件绑定到您的应用中：

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

在Application构造中的位置

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

现在，您不必将其留给路由器以始终获取标题并确保每个视图中都有getTitle方法，您可以 - 在视图内部，因此，任何视图 - 触发以下内容渲染或初始化视图时的事件：

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

在我看来，它使得代码更清晰，更精简，但话说回来，这只是一种意见。

Answer 2

为什么你们都使用jQuery来改变文档的标题而不是使用纯Javascript？更快，更容易，更清洁...

document.title = 'new title';

Answer 3

我建议只将代码放在路由器回调中。它将是另一行代码，但在不了解当前视图的情况下，路由器/应用程序将不知道哪个视图具有正确的标题。（在Backbone.JS中没有替换一些内置函数的情况下，真的没有一个覆盖行为并提供文档标题的好地方。

您可以非常简单地在视图中添加内容：

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

然后在你的路由器回调中：

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

另一个选择是让View在创建时或在调用特殊方法时设置它。但是，我会使用第一个选项。

Answer 4

这就是我的项目：

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 5

有点非常老的帖子，但我还要再给它一个转世。

使用当前Marionette v3.2.0，您可以执行以下操作：

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

在您看来，您可以像这样创建魔术方法：

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

标题解析本身可以如下：

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

允许通过单个分隔符解析作为数组返回的标题和内爆

它可以轻松集成到您管理内容节目的应用程序工作流程中。
onPageTitle将在视图上下文中调用（ this将是函数内的视图实例），这样就可以调用模型数据和任何相关的视图东西。
无需担心检查方法的可用性，只需拨打电话即可。
此外，如果没有定义此类方法，您可以随时回退到默认标题，因为triggerMethod会在这种情况下返回undefined。
利润！

Backbone和document.title

5 个答案: