流星动态下拉列表;不起作用

meteor dynamic dropdown doesn't work

本文关键字：不起作用 下拉列表 动态 流星      更新时间：2023-09-26

我正在使用语义Ui。现在我对下拉列表有问题。

Dropdown会动态填充minimongo中的值。

当我在myTemplate.rendered中执行$（'.menu'）.dropdown（）时，它认为dropdown是空的，它不起作用，但当我将其放入dropdownListItems.rendered时，它被调用了N次。N是项目的计数（）。

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

//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
};

我花了很长时间才得到这一点，可能是因为我不知何故对模板名称感到困惑，但以下是我如何使用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和编程还很陌生，所以我可能只是错过了一些简单的东西。无论哪种方式，这个解决方案对我都有效。

您所做的是一个很好的解决方案。由于Blaze已经发布，所以渲染回调只触发一次。

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

Avital是千年发展目标的一部分，并致力于开发新的Blaze引擎，他上传了两个不同的解决方案，说明如何实现与旧的渲染回调（Blaze之前）相同的行为。

1：通过添加新的助手。

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

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

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

<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
};
相关文章：