CODEWITHSUNDEEP
meteortypeahead.js
knu2xs
knu2xs

Reputation: 960

Struggling to use sergeyt:typeahead with code schema from Discover Meteor

My hope is to use Typeahead as part of a Meteor project using the recommended code organization from Discover Meteor. Atmosphere has a package, and this package looks like it should work, sergeyt:typeahead.

I would like to enable input#wbsSearch in clent/views/application/layout.html, , with typeahead, but cannot seem to figure out how to get it working. Initially I put the logic in client/views/application/layout.js, but it was telling me the global name of my collection, Wbs, was not defined yet...which I still do not understand.

Moving the code to client/main.js solved the issue of the Wbs global collection being avaialable, although I do not know why. Still, though the input field does not have the typeahead behavior, so I am still pretty perplexed.

Any insight into this is greatly appreciated. Once past this, the rest of the CRUD functionality in this little application will be relatively straightforward, but this has me stumped...at somewhat of an impasse.

Upvotes: 0

Views: 203

Answers (1)

mark
mark

Reputation: 1725

The likely reason that Wbs is undefined in client/views/application but not in client/main.js is that nested files are loaded first, whereas main.* files are loaded last (see the docs here about load order). The way to solve the problem with the load order and the typeahead not initializing is to wrap it inside a rendered function, for example:

Template.layout.rendered = function () {
  Meteor.typeahead('input#wbsSearch', function () {
    // create list of abbreviations
    var wbsList = Wbs.find({modifier: false}).fetch().map(function (wbsItem) {
        return wbsItem.abbrev;
    });
    // return the sorted list
    return wbsList.sort();
  });
};

Doing this should ensure that the DOM is ready to be 'infected' with the typeahead (even in the nested file, client/views/application/layout.js). Hope this helps!

Upvotes: 1

Related Questions