0

みんな。

mobifyjsツールキットを使い始めたばかりですが、2つの要素のコレクションを1つに結合するという問題が発生しました。私が動員しようとしているページには、テキストと画像の2つのリンクセットがあります。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 に答える