2

クライアントは jquery 経由で ajax 呼び出しを行っています。DB からデータをフェッチした後、応答を返しています。この応答では、さまざまな html タグに多くのクラスとスタイルを適用しています。これにより、コードが見苦しくなります。 

while (my @data = $statement->fetchrow_array())
{
print " <li class='productWrap $data[7]' style='height:200px; width:150px;'>
            <center> 
                <div class=\"productImageWrap\" id=\"productImageWrapID_$data[0]\">
                <img src=$data[5] width='75' height='75'' />
                </div>
                <div>
                    <div style='font-size: 11px; font-family: \"Verdana\"; '> $data[6] $data[1] $data[2] </div>
                    <b>                             
                        <span>  <strike>   $data[3]  </strike>  $data[4] </span>
                        <a href='#' id=\"featuredProduct_$data[0]\" onclick=\" adjust_menu(this.id); simpleCart.add('name=$data[6] $data[1] $data[2]', 'price=$data[4]','image=$data[5]');           return false;\">   
                            <img src='images/add-to-basket2.gif' alt='Add To Basket' width='111' height='32' id='featuredProduct+$data[0]' />
                        </a>
                    </b>

                </div>
            </center>
        </li>";
}

これを回避できる方法はありますか？応答を取得した後、クライアント側自体でクラスとスタイルを適用しますか?

4

1 に答える 1

1

適切な解決策は、データを JSON 文字列にエンコードし、それをクライアントに渡して、結果をレンダリングさせることです。

jquery テンプレート エンジンがいくつかあります。興味深いアプローチは次のとおりです。

<script type="text/template" id="itemTemplate">
    <ul>
        <li class='productWrap' style='height:200px; width:150px;'>
            ...
       </li>
    </ul>
</script>

これは JavaScript ではないため、ブラウザは実行しません。また、レンダリングも試みません。ただし、jQuery$('#itemTemplate ul li')を使用してリスト項目を取得できます。これで、すべての jQuery マジックを使用して、データをテンプレートに挿入したり、CSS スタイルを追加したりできます。

var item = $('#itemTemplate ul li');
item.addClass(data[7]);

関連している：

于 2013-11-13T13:11:32.460 に答える