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

Question

Meteor 1.6.1.1 是我项目的最新版本。我正在使用包 ian:accounts-ui-bootstrap-3 而不是 账户-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');
    }
});

如您所见，组件加载到带有 id="login-dropdown-list" 的 li 标记内。我只是加载了 class on click 事件。即使注释代码也能正常工作。

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

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

Add class to ian:accounts-ui-bootstrap-3 SELECT tag when rendered [Meteor JS + Blaze]

css

meteor

meteor-blaze

meteor-accounts