0

問題

私のjQueryテンプレートは、渡されたjsonからhtmlを読み取ったり構築したりしていないようです。どの段階で問題が発生するのかわかりません。

html

<li class="span3">
    <div class="thumbnail">
        <img src="<%= rsProd("Image") %>" alt="<%= rsProd("Description") %>" width="120" height="80" />
        <div class="caption">
            Order: <input type="text" style="width:100px" id="txtOrder-<%= rsProd("ImageID") %>-<%= rsProd("ImageOrder") %>" name="txtOrder-<%= rsProd("ImageID") %>-<%= rsProd("ImageOrder") %>" value="<%= rsProd("ImageOrder") %>" class="listorder" maxlength="5" />
            <br />
            <% if rsProd("ImageID") = rs("MainImage") then %>
            <button id="btnSetMain-<%= rsProd("ImageID") %>-<%= rsProd("ImageOrder") %>" name="btnSetMain-<%= rsProd("ImageID") %>-<%= rsProd("ImageOrder") %>" class="btn btn-primary btn-inverse btnSetMain" disabled="disabled">Current</button>
            <% else %>
            <button id="btnSetMain-<%= rsProd("ImageID") %>-<%= rsProd("ImageOrder") %>" name="btnSetMain-<%= rsProd("ImageID") %>-<%= rsProd("ImageOrder") %>" class="btn btn-primary btnSetMain">Set main</button>
            <% end if %>
            <button id="btnOrderRemove-<%= rsProd("ImageID") %>-<%= rsProd("ImageOrder") %>" name="btnOrderRemove-<%= rsProd("ImageID") %>-<%= rsProd("ImageOrder") %>" class="btn btn-warning btnOrderRemove">Remove</button>
        </div>  
    </div>
</li>

jQueryテンプレート

<script id="imagesTemplate" type="text/x-jquery-tmpl">
  <li class="span3">
    <div class="thumbnail">
        <img src="${image}" alt="${description}" width="120" height="80" />
        <div class="caption">
            Order: <input type="text" style="width:50px" id="txtOrder-${imageid}-${imageorder}" name="txtOrder-${imageid}-${imageorder}" value="${imageorder}" class="listorder" />
            <button id="btnSetMain-${imageid}-${imageorder}" name="btnSetMain-${imageid}-${imageorder}" class="btn btn-primary btnSetMain ${extraclass}" ${disabled}>${text}</button>
            <button id="btnOrderRemove-${imageid}-${imageorder}" name="btnOrderRemove-${imageid}-${imageorder}" class="btn btn-warning btnOrderRemove">Remove</button>
        </div>
    </div>
  </li>
</script>

返されたJSON

{"result": 
    {"0": {
          "imageurl": "\u002Fimages\u002Fmainimages\u002Fimage-01.jpg",
          "description": "",
          "imageid": 25,
          "imageorder": 1,
          "extracss": "",
          "Disabled": "",
          "text": "Set Main"
          },
     "1": {"imageurl": "\u002Fimages\u002Fmainimages\u002Fimage-02.jpg","description": "test","imageid": 17,"imageorder": 2,"extracss": "","Disabled": "","text": "Set Main"},
     "2": {"imageurl": "\u002Fimages\u002Fthumbnails\u002Fimage-03.jpg","description": "test","imageid": 15,"imageorder": 4,"extracss": "","Disabled": "","text": "Set Main"},
     "3": {"imageurl": "\u002Fimages\u002Fmainimages\u002Fimage-04.jpg","description": "","imageid": 24,"imageorder": 5,"extracss": "","Disabled": "","text": "Set Main"},
     "4": {"imageurl": "\u002Fimages\u002Fmainimages\u002Fimage-05.jpg","description": "test","imageid": 16,"imageorder": 7,"extracss": "","Disabled": "","text": "Set Main"}
    }
}

jQueryコード

ユーザーがボタンをクリックしたときに実行されるjQueryコード。これはすべて、テンプレートの入力とは別に機能します。

success:function(data, textStatus, jqXHR){
    $('#prodThumbs').empty();
    thumbs = data.items;
    $.template('thumbsTemplate');
    $('#imagesTemplate').tmpl(data.result).appendTo('#prodThumbs');
}

data.resultは正しいjson応答から正しいjsonデータを正しく生成しているようですが、テンプレートへのデータの適用は機能していないようです

完全を期すために、ClassicASPサーバー側の関数を添付しました。

set images = server.createObject("scripting.dictionary")
i = 0
While (NOT rsProd.EOF)

    set image = server.createObject("scripting.dictionary")
    image.Add "imageurl", rsProd("Image").value
    image.Add "description", rsProd("Description").value
    image.Add "imageid", rsProd("ImageID").value
    image.Add "imageorder", rsProd("ImageOrder").value
    if rsProd("ImageID").value = request.Form("main") then
        image.Add "extracss", "btn-inverse"
        image.Add "disabled", "disabled=disabled"
        image.Add "text", "Current"
    else
        image.Add "extracss", ""
        image.Add "Disabled", ""
        image.Add "text", "Set Main"
    end if

    images.Add i, image

    i = i + 1

rsProd.MoveNext()
Wend
result = (new JSON)("result", images, false)

rsProd.Close()
response.Write result
response.End

ネストされた辞書を使用して、JSONとして正しく返すことができる（そしてそう思われる）オブジェクトを作成しています（MichalGabrukiewiczのASPJSONユーティリティクラスを使用）。

本当にシンプルなものが足りない気がしますが、今は机に頭をぶつけてしまい、見えません。

結果

htmlは次のように始まります

<ul id="images">
    <li><img src="/image/initial.jpg" alt="test" id="initial" /></li>
</ul>

関数

$('#images').empty();

私を残します

<ul id="images">

</ul>

関数

thumbs = data.images;

jsonを正しく保存しますが、機能します

$('#imagesTemplate').tmpl(thumbs).appendTo('#images');

まだ私を残します

<ul id="images">

</ul>
4

1 に答える 1

0

ネストされた辞書が機能していないように見えた後、次のコードを使用してこれを修正することができました

arraySize = 0
arraySize = (rsProd.RecordCount - 1)
dim imageArrays 
redim imageArrays(arraySize)
set images = server.createObject("scripting.dictionary")
i = 0
While (NOT rsProd.EOF)

    set image = server.createObject("scripting.dictionary")
    image.Add "imageurl", rsProd("Image").value
    image.Add "description", rsProd("Description").value
    image.Add "imageid", rsProd("ImageID").value
    image.Add "imageorder", rsProd("ImageOrder").value
    if rsProd("ImageID").value = request.Form("main") then
        image.Add "extracss", "btn-inverse"
        image.Add "disabled", "disabled=disabled"
        image.Add "text", "Current"
    else
        image.Add "extracss", ""
        image.Add "disabled", ""
        image.Add "text", "Set Main"
    end if
    set imageArrays(i) = image 
    i = i + 1

rsProd.MoveNext()
Wend
result = (new JSON)("result", imageArrays, false)

rsProd.Close()
response.Write result
response.End

各画像ディクショナリを配列内のインデックスに割り当てることができ、その配列をJSONに変換しました。私は以前にこの方法を試したことがありますが、このステップで失敗しました

set imageArrays(i) = image

主に「set」キーワードを使用していなかったためです

そのため、以前に試したコメントで辞書の配列を使用するように指示してくれた@SearchAndResQの功績がありますが、これにより、もう一度振り返ることができました。

于 2012-12-12T21:08:50.777 に答える