Question

大家。

我刚刚开始使用mobifyjs工具包，我遇到了将两个元素集合合并为一个问题。在我试图动员的页面上有两组链接：文本和图像。 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>

我目前的解决方案是使用地图功能，所以在mobify.konf中我有以下内容：

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

模板是：

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

这段代码确实有效，但由于我必须将一段标记代码从tmpl文件移动到mobify.konf，因此该方法本身非常难看。有谁能建议更好的解决方案？

Answer 1

执行此类操作的最佳方法是将项目的相关属性（例如产品名称，图像网址和链接href）收集到javascript中的数据结构中，然后为新项目创建模板.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;

}

然后通过迭代数组项并将它们插入标记中的相关位置来模板化它：

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

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

1 个答案: