Question

我正在使用Semantic-Ui。现在我在下拉列表中遇到了问题。

使用minimongo中的值动态填充Dropdown。

当我在myTemplate.rendered中执行$（＆＃39; .menu＆＃39;）。dropdown（）时，它认为Dropdown是空的并且它不起作用但是当我把它放在dropdowntListItem中时被叫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

这让我永远得到了 - 可能是因为我在某种程度上与模板名称混淆了，但是这就是我如何使用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和一般的编程都很陌生，所以我可能只是错过了一些简单的东西。无论哪种方式，这个解决方案对我有用。

Answer 2

你做的是好的解决方案。自Blaze发布以来，the rendered callback is only triggered once。

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

Avital，他是MDG的一员，并参与了新的Blaze引擎have uploaded two different solutions，了解如何实现与旧渲染回调相同的行为（在Blaze之前）。

1：By adding a new helper。

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


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

2：By Wrapping the contents of #each in a template。（你做了什么）

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

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

2 个答案: