Question

I have: jquery1.6.min, jquery-tmpl.js (latest beta) and knockout-1.2.0.js. I am using a very simple example but I cannot get jquery templates to render, I cannot figure out why, simply put I can see the elements in the dom by scanning the dom using firebug – I have some tmp=annonymous(jquery,$item) appearing but the data does not render inside the dom.

template:

<script id="bookTemplate" type="text/x-jquery-tmpl">
    <h2>${title}</h2>
    price: ${formatPrice(price)}
</script>

jscode:

<script type="text/javascript">
        $(document).ready(function() {
        // Create an array of books
        var books = [
            { title: "ASP.NET 4 Unleashed", price: 37.79 },
            { title: "ASP.NET MVC Unleashed", price: 44.99 },
            { title: "ASP.NET Kick Start", price: 4.00 },
            { title: "ASP.NET MVC Unleashed iPhone", price: 44.99}];

        function formatPrice(price) {
            return "$" + price.toFixed(2);
        }

        // Render the books using the template
        $('#bookTemplate').tmpl(books).appendTo('#bookContainer');
        });
    </script>

Answer 1

window.formatPrice = function formatPrice(price) {
    return "$" + price.toFixed(2);
}

Live Example

Your calling formatPrice in your template but defining the function in your closure. To be able to do this formatPrice has to be in global scope. An easy way to do this is to assign the function to windiw.formatPrice