例2：データの訂正及び表示¶

以下では、デスクトップサイトのページ上で提供されるデータの修正方法、及びモバイル上にそれを返す方法を例示します。

デスクトップサイトのページコード

<html>
    <body>
        <div>
            <img src="image1.jpg" />
            <img src="image2.jpg" />
            <img src="image3.jpg" />
        </div>
        <div>
            <img src="image4.jpg" />
            <img src="image5.jpg" />
            <img src="image6.jpg" />
        </div>
    </body>
</html>

テンプレートパラメータの定義

imageList1: {
    xpath: '//img[@class="class1"]',
    get:   '@src',
    list: true
},

imageList2: {
    xpath: '//img[@class="class2"]',
    get:   '@src',
    list: true
}

スニペット内のコード

<!--{foreach arguments[0] as item }-->
   <img src="<!--{= 'mobile-' + item }-->">
<!--{/foreach}-->

テンプレート内のコード

<!--{ call sample_snippet($.imageList1) }-->
...
<!--{ call sample_snippet($.imageList2) }-->

モバイルサイトのページ上の結果コードは以下のようになります。

<img src="mobile-image1.jpg">
<img src="mobile-image2.jpg">
<img src="mobile-image3.jpg">
...
<img src="mobile-image4.jpg">
<img src="mobile-image5.jpg">
<img src="mobile-image6.jpg">

“mobile-”という文字列が、src画像属性に追加されます。

参考