javascript - 注册MDL组件

Question

我在前端使用带有 Handlebars 模板的主干以及 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>

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

我的主干 View 看起来像这样

(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 限制为特定范围(来自主干的 el)，以便我只能定位页面中正在被 View 更改的部分。

Answer 1

尝试...

componentHandler.upgradeElements(rootElement);

至少在我向对话框添加元素后这对我有用。