将 javascript 应用于生成的内容

Question

作为 Meteor 的新手，我在使用 Helper 生成输入 "on-the-fly" 时遇到了一个问题。事实上，我想要做的是生成一个带有下拉列表的左标记输入，但问题是我必须调用方法 $('.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>

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

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

Answer 1

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

注意： 已创建社区 Wiki 答案，因为 Michel Floyd 在评论中回答了问题。

将 javascript 应用于生成的内容

Applying javascript to generated content

javascript

meteor

semantic-ui