jquery template composition

I have 73 items in a data object, i want to create page views of a maximum of 12 items per page, i have tried using the jquery templating logic to determine when to close and open a new page div like so. Forgive any syntax or logic mistakes, i've quickly re-wrote this from memory.

<script id="listTmpl" type="text/x-jquery-tmpl">

{{if idx == 0}}
    <div class="page">
{{/if}}

        <div class="item mrl">
            <a href="">
                <img src="http://files.stv.tv/img/player/${programmeName}/episodes/${episodeName}-230.jpg" alt="${programmeNiceName}" />
                <h3 class="mln mvs">${programmeNiceName}</h3>
                <p>${idx}</p>
            </a>        
        </div>

{{if idx % 12 == 0}}
    </div>
    <div class="page">
{{/if}}

{{if idx == ($item.getTotal() - 1)}}
    </div>
{{/if}}

</script> 

Unfortunately within chrome i get the following error.

Uncaught TypeError: Cannot call method 'push' of undefined

My assumption is that on some iterations over each 开发者_如何学JAVAitem the html being generated is not valid which is throwing the error, can anyone suggest a better way of doing things or where i might be going wrong.

If it helps, I was getting this error when I had an unclosed anchor tag in the template html. Adding the </a> fixed the problem.

My assumption is that on some iterations over each item the html being generated is not valid which is throwing the error, can anyone suggest a better way of doing things or where i might be going wrong.

Nope push is a method on the Array prototype. My guess would be that you are trying to push a value onto an Object or some other type instead of an Array. I cant be sure because its not the template code that you posted unless you have left out that part.

I am curious, can't you have the code like --> ??

{{if idx % 12 == 0}}
    <div class="page">
{{/if}}

        <div class="item mrl">
            <a href="">
                <img src="http://files.stv.tv/img/player/${programmeName}/episodes/${episodeName}-230.jpg" alt="${programmeNiceName}" />
                <h3 class="mln mvs">${programmeNiceName}</h3>
                <p>${idx}</p>
            </a>        
        </div>

{{if (idx % 12 == 0 && idx > 0) || idx == $item.getTotal() - 1}}
    </div>
{{/if}}

I am now working out another way (an open source project) to generate HTML on the fly, for instance, your case can be like maniplating a tree of element nodes. I hope the following code is clear to you,

function getYouHTML(allData){
    var t = Tog('div.page'); // new a div node

    for(var i = 0; i < allData.length; i ++){
        var d = allData[i]
        t.Div('.item.mrl')
        .A().href('')
        .img().src("http://files.stv.tv/img/player/", d.programmeName, "/episodes/", d.episodeName, "-230.jpg")
            .alt(d.programmeNiceName)
        .h3(d.programmeNiceName).cls('mln mvs')
        .p(d.idx)
        .close('.item.mrl')

        if(i % 12 == 0){
            t.close('.page').Tog('div.page'); // close it and re-new one if i % 12 == 0
        }
    }

    return t.html();
}

// json = [{idx:0, programmeName: 'name 1', episodeName: ...}, {idx: 1, program... }, {idx: 2, ...} ]
getYouHTML(json);

As it turns the fix for this issue required a change to line 426 of the jquery template code link