CODEWITHSUNDEEP
javascriptmeteorsemantic-ui
lampe2
lampe2

Reputation: 11

meteor dynamic dropdown doesn't work

I'am using Semantic-Ui. Now I have problems with the dropdown.

The Dropdown get populated dynamically with values from the minimongo.

When I do $('.menu').dropdown() in myTemplate.rendered it thinks the Dropdown is empty and it doesn't work but when i put it in dropdowntListItems.rendered it get called N times. N is the count() of the items.

This solution works. Is there a better solution for that?

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

Upvotes: 1

Views: 3056

Answers (2)

benvenker
benvenker

Reputation: 355

This took me forever to get - probably because I got confused with template names somehow, but here’s how I created a dropdown list of vendor names, populated from a MongoDB collection, using Meteor.js and Semantic-Ui:

First, create your templates for the dropdown list and the items it will contain:

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

Then, make sure the jQuery for the dropdown works and get the list of vendors in 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();
  }
});

It's not dramatically different from the first answer, but I couldn't get that answer to work for me. I'm pretty new to Meteor and programming in general so I was likely just missing something simple. Either way, this solution worked for me.

Upvotes: 3

Julien Le Coupanec
Julien Le Coupanec

Reputation: 7996

What you did is the good solution. Since Blaze has been released, the rendered callback is only triggered once.

In Template.myTemplate.rendered, the dropdown is empty because the rendered callback is triggered before Items().fetch() in Template.myTemplate.dropdownList is completely run. Besides, when a new item is added, another problem would be that the dropdown will not be updated.

Avital, who is part of the MDG and have worked on the new Blaze engine, have uploaded two different solutions on how to achieve the same behavior as the old rendered callback (before 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. (what you did)

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

Upvotes: 1

Related Questions