javascript - 注册 MDL 组件

Question

我在前端使用 backbone 和 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 规则已应用，只是 javascript 不适用于这些组件。

我什至不知道从哪里开始，所以欢迎任何建议或回答。

到目前为止，我已经知道我可以调用 componentHandler.upgradeAllRegistered();，所有这些都将被注册并正常工作。我可以在渲染后将其连接到事件上，但不确定其性能。据我了解，这将遍历整个 DOM。

另外，我想避免一个一个地注册或作为一个数组注册，因为这很容易出错并且是维护噩梦。

我的下一步将是查看是否可以将 upgradeAllRegistered 限制到特定范围( Backbone 中的 el)，以便我只能定位页面中正在被 View 更改的部分。

Answer 1

尝试...

componentHandler.upgradeElements(rootElement);

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