Question

问题

我的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数据，但是将数据应用到模板似乎不起作用

为了完整性，我已经附加了经典ASP服务器端功能。

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正确返回的对象（使用Michal Gabrukiewicz's ASP JSON utility class。）

我觉得我错过了一些非常简单的东西，但是现在我已经把头撞到桌子上了，我看不到它。

结果

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>

Answer 1

在嵌套词典看起来不起作用之后，我设法通过使用以下代码解决了这个问题

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告诉我在我之前尝试过的评论中使用了一系列字典，但是这让我再次回顾它。

jQuery模板不使用从Classic ASP传递的JSON

1 个答案: