渲染时将类添加到 ian:accounts-ui-bootstrap-3 SELECT 标记 [Meteor JS + Blaze]答案

【问题标题】：Add class to ian:accounts-ui-bootstrap-3 SELECT tag when rendered [Meteor JS + Blaze]渲染时将类添加到 ian:accounts-ui-bootstrap-3 SELECT 标记 [Meteor JS + Blaze]
【发布时间】：2018-09-27 05:51:50
【问题描述】：

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

【问题讨论】：

我认为你必须用 form-group w3schools.com/bootstrap/bootstrap_forms.asp 扭曲它

标签： css meteor meteor-blaze meteor-accounts

【解决方案1】：

好吧，我尝试了一种方法来实现这一点，即使用下面的模板事件，

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

如您所见，组件被加载到带有id="login-dropdown-list" 的li 标签内。我只是在点击事件上加载了类。即使是注释代码也可以正常工作。

这是一个好的解决方案吗？请让我知道是否有更好的答案？如果可行，我一定会接受并投票赞成答案。

【讨论】：