Combine two collections of elements with mobify.js

everyone.

I've just started using the mobifyjs toolkit and I've ran into a problem of combining two collections of elements into one. On a page I'm trying to mobify there are two sets of links: with text and images. The HTML looks like the following:

<!-- links with text -->
<div id="products">
    <a href="Product1">Product 1</a>
    <a href="Product2">Product 2</a>
</div>
...
<!-- somewhere else on the page -->
<div id="productImages">
    <a href="Product1"><img src="Product1.png /></a>
    <a href="Product2"><img src="Product2.png /></a>
</div>

It needs to turn into the following:

<div class="items">
    <div class="item">
        <div class="img">
            <a href="Product1"><img src="Product1.png /></a>
        </div>
        <div class="title">
            <a href="Product1">Product 1</a>
        </div>      
    </div>
    <div class="item">
        <div class="img">
            <a href="Product2"><img src="Product2.png /></a>
        </div>
        <div class="title">
            <a href="Product2">Product 2</a>
        </div>      
    </div>
</div>

My current solution is to use map function, so in the mobify.konf I have something like the following:

'content': function(context) {
    return context.choose(
        {{
            'templateName': 'products',
            'products': function(){
                return $('#productImages a').map(function() {
                    var href = $(this).attr('href') || '';

                    var div = $('<div class="item"><div class="img"></div><div class="title"></div></div>');
                    div.find('.img').append($(this).clone());
                    div.find('.title').append($('#products a[href="' + href + '"]').clone());

                    return div;
                });
            }
        })
}

And the template is:

<div class="items">
    {#content.products}
        {.}
    {/content.products}
</div>

This code does work but the approach itself is pretty ugly since I have to move a piece of markup code from the tmpl file into mobify.konf. Can anyone suggest a better solution?

Solution

The best way to do this sort of thing is to collect the relevant properties for your items (e.g. the product name, the image url and the link href) into a data structure in javascript, and then create a template for your new html structure in the .tmpl file. Something like

'products': function() {
    var products = [], 
        $productLinks = $('#products a'), 
        $productImages = $('#productImages img')
        len = $productNames.legnth;
    for(var i = 0; i<len; i++) {
        var $link = $productLinks.eq(i);
        var $img = $productImages.eq(i);
        products.push({name: $link.text(), href: $link.attr('href'), imgSrc: $img.attr('src')});
    }
    return products;

}

and then template it by iterating over the array items and inserting them into relevant places in the markup:

<div class="items">
{#content.products}
    <div class="item">
        <div class="img"><img src="{.imgSrc}" /></div>
        <div class="title"><a href="{.href}">{.name}</a></div>
    </div>
{content.products}
</div>