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

Question

I'm on a .NET 4.0 environment using jQuery and Visual Studio to write everything, but neither of these facts should matter that much except how to populate the XML data.

I'm starting out with this script which has a lot of markup in it. My task is to get the markup out of the script and to populate the the XML data into the markup in its proper place. I'm trying to keep the presentation and behavior layers as separate as possible by doing this.

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);
}

Here's example markup I want as final result:

<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>

While I know I need to take out the line of code that starts li = li + ... , I'm also not familiar enough with OOP to understand how to write a for loop to populate the markup.

So there's two factors that I am not sure how to code:

1. The blank markup - does the markup need variables to populate it or should javascript do this automatically?
2. The javascript - I don't know how to recode the javascript to find each list item and image tag to populate the various data.

Do I need the markup to be blank like this, where all the variable data is not there yet?

<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>

I appreciate the insight and help.

Answer 1

I would do it like this.

Let's suppose we have a container DIV#foo where all this code has to reside.

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

We then do this:

$(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);       
   }

});

So, we do it like this, because we don't want to fire jQuery stuff in the for loop. That kills performance. Instead we set up a deferred even handler for click on the conainer DIV#foo, and we shove the whole bunch of markup into the container as a string.