Custom Templates not working...

[michaeljfalk]

I have tried to implement a custom template but nothing shows up, it seems fairly straightforward.

This is the code I'm using...

<template name="companySearch">
    <input class="form-control typeahead dispatch_entry" name="company" type="text"
           placeholder="Company Name"
           autocomplete="off" spellcheck="off"
           data-source="dispatchCompanies" data-template="companyDropdown"/>
</template>

<template name="companyDropdown">
    <p class="companyName">{{companyName}}</p>
    <p class="companyCity">{{address.city}}</p>
    <p class="companyProv">{{address.prov}}</p>
    <p class="companyCountry">{{address.country}}</p>
</template>

Any suggestions as to why nothing displays?

[michaeljfalk]

I have found that this works for implementing a custom template...

Define your input like this in your templates file...

<template name="companySearch">
    <input id="company_entry" class="form-control typeahead dispatch_entry" name="name" type="text"
           placeholder="Company Name"
           autocomplete="off" spellcheck="false"
           data-sets="dispatchCompanies"/>
</template>
<template name="companiesTemplate">
    <div class="suggestionDiv">
        <p class="suggestionTitle">{{name}}</p>
        <p class="suggestionCity">{{city}}</p>
    </div>
</template>

Then in your helper...

Template.companySearch.helpers({
    dispatchCompanies: function () {
        return [
            {
                name: 'dispatchCompanies',
                valueKey: 'name',
                display: 'name',
                local: function() { return DispatchCompanies.find().fetch(); },
                template: 'companiesTemplate'
            }
        ];
    }
});

I haven't been able to find out how to define multiple custom templates though...

Hope this helps...

[kevinwu]

for me, custom templates don't work either. Could the package author provide more info on this issue?

[sergeyt]

@kevinwu demo app can help. I've just run it and the sample with custom templates is still functioning. Extracted example:

template:

<template name="custom_template">
	<div>
		<h2>Using custom template</h2>
		<div class="form-group example-twitter-oss">
			<input class="form-control typeahead" name="repo" type="text" placeholder="open source projects by Twitter"
				   autocomplete="off" spellcheck="off"
				   data-source="repos" data-templates="repo;empty:noresults"/>
		</div>
		<div class="gist">
			{{{gist 'sergeyt' '8054682'}}}
		</div>
		<div class="gist">
			{{{gist 'sergeyt' '8054730'}}}
		</div>
	</div>
</template>

<template name="repo">
	<p class="repo-language">{{language}}</p>
	<p class="repo-name">{{name}}</p>
	<p class="repo-description">{{description}}</p>
</template>

<template name="noresults">
	<span>No results found</span>
</template>

and JavaScript helper:

Template.custom_template.helpers({
    repos: function(){
        return Repos.find().fetch();
    }
});