javascript - 使用 JavaScript 变量用 XML 数据动态填充标记

Question

我在 .NET 4.0 环境中使用 jQuery 和 Visual Studio 编写所有内容，但除了如何填充 XML 数据之外，这些事实都不重要。

我从这个脚本开始，其中有很多标记。我的任务是从脚本中获取标记并将 XML 数据填充到标记中的适当位置。我试图通过这样做使表示层和行为层尽可能分开。

function addIcons(IconType) {
    var li ="";
    var onclickMethod="";
    for (var item in hashObject) {
        var thumbNail = item.split("_");
        if (thumbNail[0] == IconType +"ThumbNail") {
            var imagePath = baseUrlThumbNailImages + hashObject[item];

            li = li + "<li  onclick=IconClick('" + IconType +"',"+ thumbNail[1] + ")><img src=\"" + imagePath + "\" alt=\"" + IconType + " shape\"></li>\n";
        }
    }
    $("#" + IconType + "ThumbNailShapes").append(li);
}

这是我想要作为最终结果的示例标记:

<ul>
  <li onclick="IconClick('Item',1)">
    <img src="/images/image_1.png" alt="Item shape" />
  </li>
  <li onclick="IconClick('Item',2)">
    <img src="/images/image_2.png" alt="Item shape" />
  </li>
  <li onclick="IconClick('Item',3)">
    <img src="/images/image_3.png" alt="Item shape" />
  </li>
</ul>

虽然我知道我需要删除以 li = li + ... 开头的代码行，但我对 OOP 还不够熟悉，无法理解如何编写 for 循环填充标记。

所以有两个因素我不确定如何编码:

1. 空白标记 - 标记是否需要变量来填充它，还是 JavaScript 应该自动执行此操作？
2. JavaScript - 我不知道如何重新编码 JavaScript 来查找每个列表项和图像标记来填充各种数据。

我是否需要将标记设置为空白，因为所有变量数据还不存在？

<ul id="IconThumbnailShapes">
  <li onclick="">
    <img src="" alt="shape" />
  </li>
  <li onclick="">
    <img src="" alt="shape" />
  </li>
  <li onclick="">
    <img src="" alt="shape" />
  </li>
</ul>

我很欣赏您的见解和帮助。

Answer 1

我会这样做。

假设我们有一个容器 DIV#foo，所有这些代码都必须驻留在其中。

<div id="foo"></div>

然后我们这样做:

$(function() {
   // DOM ready

   $('#foo').on('click', '#IconThumbnailShapes li', function() {
       // Do whatever you have to do with icon
       // Second argument there '#IconThu... li' means the event will be trigerred 
       // as soon as you add your icons, but they don't have to be there 
       // right now.
   });

   function addIcons(iconType) {
       var s = '<ul id="IconThumbnailShapes">'
       var l = '<li><img src="$SRC" alt="$ICON shape" /></li>'
       var data = [{...}, {...}, {...}];
       var len = data.length;

       var datum;

       for (var i = len; i; i--) {
          datum = data[len - i];
          s += l.replace('$SRC', datum.src).replace('$ICON', iconType);
       }

       s += '</ul>';

       $('#foo').html(s);       
   }

});

所以，我们这样做，因为我们不想在 for 循环中触发 jQuery 的东西。这会影响性能。相反，我们为单击容器 DIV#foo 设置了一个延迟偶数处理程序，并将整堆标记作为字符串推送到容器中。