CODEWITHSUNDEEP
jquerytemplatesjquery-templates
colin
colin

Reputation: 121

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 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.

Upvotes: 1

Views: 1182

Answers (4)

rob
rob

Reputation: 4107

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.

Upvotes: 6

colin
colin

Reputation: 121

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

Upvotes: 0

Liangliang Zheng
Liangliang Zheng

Reputation: 1785

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);

Upvotes: 0

prodigitalson
prodigitalson

Reputation: 60413

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.

Upvotes: 0

Related Questions