1

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

Dropdown 使用来自 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
};
4

2 回答 2

3

我花了很长时间才明白——可能是因为我不知何故对模板名称感到困惑，但这是我使用 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

// 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 和编程很陌生，所以我可能只是错过了一些简单的东西。无论哪种方式，这个解决方案都对我有用。

于 2014-08-26T01:22:57.193 回答
1

你所做的是很好的解决方案。由于 Blaze 已发布，因此渲染的回调仅触发一次。

in Template.myTemplate.rendered，下拉菜单是空的，因为渲染的回调在Items().fetch()inTemplate.myTemplate.dropdownList完全运行之前被触发。此外，当添加新项目时，另一个问题是下拉列表不会更新。

Avital 是 MDG 的一员，并致力于新的 Blaze 引擎，他上传了两种不同的解决方案，说明如何实现与旧渲染回调（在 Blaze 之前）相同的行为。

1：通过添加一个新的助手。

<template name="myTemplate">
    <div class="menu">
        {{#each dropdowntList}} 
            {{item}}
        {{/each}}
    </div>
</template>


Template.myTemplate.item = function (){
    $('.menu').dropdown();
};

2：通过将#each 的内容包装在一个模板中。（你做了什么）

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

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

Template.dropdowntListItems.rendered = function(){
    $('.menu').dropdown(); //gets called N times
};
于 2014-04-23T02:35:01.013 回答