Javascript 使用mobify.js组合两个元素集合

各位

我刚开始使用工具包，遇到了将两个元素集合合并为一个的问题。 在我试图移动的页面上有两组链接：文本和图像。HTML如下所示：

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

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

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

...

它需要转化为以下内容：

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

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

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

我目前的解决方案是使用map函数，因此在mobify.konf中，我有如下内容：

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

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

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

“内容”：函数（上下文）{
返回上下文。选择(
{{
“templateName”：“产品”，
“产品”：函数（）{
返回$（'#productImages a'）.map（函数（）{
var href=$（this.attr（'href'）||''；
var div=$（''）；
div.find（'.img'）.append（$（this.clone（））；
div.find（'.title'）.append（$（'#产品a[href=“'+href+'”）.clone（））；
返回div；
});
}
})
}

模板为：

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

{#content.products}
{.}
{/content.products}

---

这段代码确实有效，但这种方法本身非常难看，因为我必须将一段标记代码从tmpl文件移到mobify.konf中。有人能提出更好的解决方案吗？

完成这类工作的最佳方法是收集项目的相关属性（例如，产品名称、图像url和链接href）然后在.tmpl文件中为新的html结构创建一个模板

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

}

“产品”：函数（）{
var乘积=[]，
$productLinks=$（“#产品a”），
$productImages=$（“#productImages img”）
len=$PRODUCTNAME.legnth；
对于（var i=0；i