javascript - meteor 动态下拉菜单不起作用

Question

我正在使用 Semantic-Ui。 现在我的下拉菜单有问题。

下拉列表会使用 minimongo 中的值动态填充。

当我在 myTemplate.rendered 中执行 $('.menu').dropdown() 时，它认为 Dropdown 是空的并且不起作用，但是当我将其放入 dropdowntListItems.rendered 时，它被调用了 N 次。 N 是项目的 count()。

这个解决方案有效。 有更好的解决方案吗？

//myTemplate
<div class="menu">
    {{#each dropdowntList}} 
        {{> dropdowntListItems}}
    {{/each}}
 </div>

 <template name="dropdowntListItems">
     <div class="item">{{item}}</div>
 </template>

Template.myTemplate.dropdowntList = function (){
    return Items().fetch();
};

Template.dropdowntListItems.rendered = function(){
    $('.menu').dropdown(); //gets called N times
}; 

Answer 1

这让我花了很长时间才明白 - 可能是因为不知何故我对模板名称感到困惑，但这是我创建 vendor 名称下拉列表的方式，使用 Meteor.js 和 Semantic-Ui 从 MongoDB 集合中填充:

首先，为下拉列表及其将包含的项目创建模板:

<template name="vendorNames">
  <div class="ui selection dropdown">
    <input type="hidden" name="vendor">
    <div class="default text">Vendor</div>
    <i class="dropdown icon"></i>
    <div class="menu">
      {{# each vendorNames}}
        {{> vendorName}}
      {{/each}}
    </div>
  </div>
</template>

<template name="vendorName">
  <div class="item" name="vendor">{{name}}</div>
</template>

然后，确保下拉列表的 jQuery 正常工作，并在 vendor_names.js

中获取 vendor 列表

// Activate semantic-ui jQuery for drop down
Template.vendorNames.rendered = function() {
  $('.ui.selection.dropdown')
    .dropdown('restore default text')
    ;
}
// Add the template helper to get the Vendors list
Template.vendorNames.helpers({
  vendorNames: function() {
    return Vendors.find();
  }
});

它与第一个答案并没有太大的不同，但我无法让那个答案为我工作。我对 Meteor 和一般编程还很陌生，所以我可能只是遗漏了一些简单的东西。无论哪种方式，这个解决方案都对我有用。