javascript - 将 javascript 应用到生成的内容

Question

作为 Meteor 的新手，我遇到了使用 Helper“即时”生成输入时遇到的问题。事实上，我想做的是生成一个带有下拉菜单的左标记输入，但问题是我必须调用方法 $('.ui.dropdown').dropdown();

创建每个输入及其相应的下拉列表后，我不知道如何使用语义 UI 和 Meteor 环境正确执行此操作。这是我创建输入的助手:

'filterColumns': function() {
        return Session.get('s_filterColumns');
    }

其中“s_filterColumns”是一个类似于 ["Firstname", "Lastname", "LivingPlace"] 的数组

这是使用助手生成输入的 HTML 模板:

<div id="fields">
        <div class="ui grid">
            {{#each filterColumns}}
                <div class="eight wide column">
                    <label>{{this}}</label>
                    <div class="ui left labeled input">
                        <div class="ui dropdown label">
                            <div class="text">Start by</div>
                            <i class="dropdown icon"></i>
                            <div class="menu">
                                <div class="item">Start by</div>
                                <div class="item">Contains</div>
                                <div class="item">End by</div>
                            </div>
                        </div>
                        <input type="text">
                    </div>
                </div>
            {{/each}}
        </div>
    </div>

但是，当用新内容填充 session 变量时，会相应地创建输入，但不会再次调用 javascript 下拉方法，因此我的左侧标签不是下拉菜单。

如果您对我的构想有任何建议，我很乐意向比我更有经验的人学习。

Answer 1

如果您不确定何时调用 $('.ui.dropdown').dropdown()，请尝试在 Template.myTemplate.onRendered() 内运行它，其中myTemplate 是您的模板的名称。鉴于您有多个下拉菜单，但您可能希望将 {{#each }} 内的 html 放入其自己的模板中，并将其用于 onRendered()。

注意:创建社区 Wiki 答案是因为米歇尔·弗洛伊德在评论中回答了问题。