16

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

4

5 回答 5

34

为什么不使用 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);

在我看来，它使代码更简洁、更精简，但话又说回来，这只是一种观点。

于 2012-05-08T10:25:37.837 回答
27

为什么你们都使用jQuery来更改文档的标题而不是使用纯Javascript？更快、更简单、更清洁……

document.title = 'new title';
于 2013-05-07T09:35:52.160 回答
2

我建议将代码放在您的路由器回调中。这将是另一行代码，但如果不知道当前视图，路由器/应用程序将不知道哪个视图具有正确的标题。（在不替换 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());

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

于 2012-05-08T01:38:24.983 回答
1

这就是我做这个我的项目：

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);
    }
  }

})
于 2013-12-18T04:33:16.877 回答
1

有点旧的帖子，但我会再给它一个轮回。

使用当前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
  • 利润！
于 2017-03-14T18:54:10.197 回答