0

每个人。

我刚开始使用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 中。任何人都可以提出更好的解决方案吗？

4

1 回答 1

1

做这种事情的最好方法是将您的项目的相关属性（例如产品名称、图像 url 和链接 href）收集到 javascript 中的数据结构中，然后为您的新 html 结构创建模板.tmpl 文件。就像是

'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>
于 2013-03-18T08:41:27.920 回答