将类添加到ian：accounts-ui-bootstrap-3渲染时的SELECT标签[Meteor JS + Blaze]

Question

Meteor 1.6.1.1是我项目的最新版本。我使用的包 ian：accounts-ui-bootstrap-3 而不是 accounts-ui 。我在代码中添加了一个自定义字段<select>。

我在屏幕上看到的内容如下所示。

当我看到HTML代码时，它没有将class="form-control"添加到select代码。

下面是我使用Chrome检查UI上的元素时的代码。

<li id="login-dropdown-list" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Sign in / Join <b class="caret"></b></a>
    <div class="dropdown-menu">
        <div class="select-dropdown">
            <label>State</label><br>
            <select id="login-state">
            </select>
        </div>
        <button class="btn btn-primary col-xs-12 col-sm-12" id="login-buttons-password" type="button">
            Create
        </button>
        <button id="back-to-login-link" class="btn btn-default col-xs-12 col-sm-12">Cancel</button>
    </div>
</li>

我想要的是在屏幕上加载组件时动态地将class="form-control"添加到select标记，它必须如下所示;

我尝试了以下代码，但它无效;

Template.HomePage.onRendered(function () {
    document.getElementById('login-state').classList.add('form-control');
});

Answer 1

好吧，我试过一种方法来实现这一点，方法是使用如下的模板事件，

Template.HomePage.events({
    'click #login-dropdown-list': function(event){
        //document.getElementById('login-state').classList.add('form-control');
        $('#login-state').addClass('form-control');
    }
});

如您所见，该组件已在li标记内加载id="login-dropdown-list"。我只是在click事件上加载了这个类。即使是注释代码也能正常工作。

这是一个很好的解决方案吗？如果有更好的答案，请告诉我？如果它有效，我肯定会接受并提出答案。