注册 MDL 组件

我在前端使用带有车把模板的主干以及 MDL。

例如，我想集成演示下拉菜单。由于它将在稍后加载(而不是在页面加载时加载(，因此下拉列表不起作用。

<button id="demo-menu-lower-right" 
        class="mdl-button mdl-js-button mdl-button--icon">
       <i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
    for="demo-menu-lower-right">
       <li class="mdl-menu__item">Some Action</li>
       <li class="mdl-menu__item">Another Action</li>
       <li disabled class="mdl-menu__item">Disabled Action</li>
       <li class="mdl-menu__item">Yet Another Action</li>
</ul>

根据入门，如果组件是动态的，我需要注册它们。

我的骨干视图是这样的

(function () {
'use strict';
var $ = require('jquery'),
    hbs = require('handlebars'),
    Backbone = require('backbone');
var menuTPL = require('nav/navigation-links.hbs');
module.exports = Backbone.View.extend({
    el: $('.mdl-navigation'),
    initialize: function () {
        this.render();
        this.listenTo(this.model, 'change', this.render);
    },
    render: function () {
        var template = menuTPL({user: this.model.toJSON()});
        this.$el.html(template);
    },
});
})();

现在，我将在哪里注册此组件，以及对此的合理方法是什么，这样我就不必一遍又一遍地编写相同的代码来注册新内容，因为几乎所有页面都被模板化了？CSS规则是ofc应用的，它只是javascript在这些组件上不起作用。

我甚至有点不知道从哪里开始，所以欢迎任何建议或答案。

到目前为止，我已经发现我可以打电话给componentHandler.upgradeAllRegistered();，所有这些都将被注册并正常工作。我可以在渲染后将其挂在事件上，但不确定其性能。据我了解，这将通过整个 DOM。

另外，我想避免一个接一个地注册或注册为数组，因为这容易出错和维护噩梦。

我的下一步是查看是否可以将upgradeAllRegistered限制在特定范围内(来自主干(，以便我只能针对视图正在更改的页面部分。