image - JQuery を使用して剣道 UI リストビューで画像のサイズを変更する

Question

SQL データベースからクエリされたデータが取り込まれた Kendo UI ListView で画像のサイズを変更しようとしています。

私の ListView DIV とテンプレート:

<div>
    <div id="lvUserMainPics"></div>
</div>

<script type="text/html" id="lv-pics-template">
    <div id="profile-container">
    <div id="profile">            
        <div id="profile-photo">
            <div class="non-immediate-parent-container">
                <img class="main-img" alt="" src="#=Pic#" />
            </div> 
        </div>
    </div>
</div>
</script>

これが私のデータ ソースと ListView バインドです。

var sourceMainPics = new kendo.data.DataSource({
           transport: {
               read: "api/userpics/pics/main"
           },
           schema: {
               data: "Data",
               total: "Count"
           }
       });

       $("#lvUserMainPics").kendoListView({
           dataSource: sourceMainPics,
           template: kendo.template($("#lv-pics-template").html())
       });

ListView がデータをバインドしているため、次の JQuery メソッドを呼び出して画像のサイズを変更できるようにしたいと考えています。

$('img.main-img').imgscale({
           parent: '.non-immediate-parent-container',
           fade: 1000
       });

現在、画像を ListView にバインドすることはできますが、サイズ変更は機能しません。これを達成する方法について何か提案はありますか? 最悪の場合、アップロード時に異なるサイズの画像を作成してサーバーに保存することもできますが、最初はこのルートを試してみたかった. 助けてくれてありがとう。

[アップデート]

ListView に dataBound イベントを追加することで、現在作業中です。

$("#lvUserMainPics").kendoListView({
           dataSource: sourceMainPics,
           template: kendo.template($("#lv-pics-template").html()),
           dataBound: function (e) {                   
               $('img.main-img').imgscale({
                   parent: '.non-immediate-parent-container',
                   fade: 1000
               });
           }
       });