javascript - アンカータグを使用してグリッドに動的ボタンを作成する

Question

アコーディオン内のグリッドに動的ボタンを作成したいと考えています。私の静的コードは次のとおりです。ダイナミックにしたい。実行時に、グリッドで作成する必要があるボタンの数を知っています。行数はボタンの数に応じて変更できますが、列は 4 のままにする必要があります。

<div data-role="collapsible" data-theme="c" data-content-theme="b"  class="custom-collapsible" >
<h3>Kategorie 01</h3>
<div class= "limit-theme">          
        <div data-role="content">
            <div class="ui-grid-c">
                <div class="ui-block-b">  <a data-role="button" class="custom-button"></a>          
                </div>
                <div class="ui-block-b"> <a data-role="button" class="custom-button"></a>
                </div>
                <div class="ui-block-c"> <a data-role="button" class="custom-button"></a>
                </div>
                <div class="ui-block-d"> <a data-role="button" class="custom-button"></a>
                </div>
                <div class="ui-block-a"> <a data-role="button" class="custom-button"></a>
                </div>
                <div class="ui-block-b"> <a data-role="button" class="custom-button"></a>
                </div>
                <div class="ui-block-c"> <a data-role="button" class="custom-button"></a>
                </div>
                <div class="ui-block-d"> <a data-role="button" class="custom-button"></a>
                </div>
                <div class="ui-block-a"> <a data-role="button" class="custom-button"></a>
                </div>
                <div class="ui-block-b"> <a data-role="button" class="custom-button"></a>
                </div>
                <div class="ui-block-c"> <a data-role="button" class="custom-button"></a>
                </div>
                <div class="ui-block-d"> <a data-role="button" class="custom-button"></a>
                </div>
            </div>
        </div>
</div>

データ モデルを作成しましたが、このデータ モデルをこのグリッドにリンクしたいと考えています。さらに、すべてのボタンには 2 つの異なる背景画像 ..pressed.jpg と normal.jpg があります。これらのボタンを作成し、データモデルから背景画像を設定したいと思います。上記のコードでは、すべてのボタンに同じ背景画像があります。