JQuery-tmpl Template Switching Not working

Question

I'm trying to implement "more/less" functionality using the official jquery-tmpl plugin.

I've looked at the examples, but I cannot seem to get the functionality to work in my own implementation.

When I click on one of my "More" buttons, I seem to get an error thrown of: Uncaught TypeError: Property 'tmpl' of object #<an Object> is not a function

This is my implementation here

From what I can tell, the example I'm trying to replace is doing the following:

1. Render the "Master" template
2. On-click: Find the corresponding template object (tmplItem) to the clicked element.
3. Pass in reference to a new template.
4. Call the update function to re-render.

Have I understood the documentation wrong? From what I can tell I'm doing the same thing as the example on the official documentation.

Answer 1

I've made a working version here:

My issues were due to a number of noobie bugs :)

http://jsfiddle.net/CmX4k/27/

Answer 2

For anyone looking for help on this (like I was) I had a similar problem and it was because of a nested template defined {{tmpl "#myNestedTemplate"}} that did not exist on the DOM.

Answer 3

I had the same problem. The issue was that the selector, "#myNestedTemplate" did not exist in the document.

Check to make sure the template with id "myNestedTemplate" exists, and that there aren't any typos.