Nesting and Functions and Arrays, oh my!

expand.js

var comments = [
  { author: "Dave Crosby",   approved: true,  text: "Sounds Delicous!" },
  { author: "Micah Alles",   approved: false, text: "What next?!?" },
  { author: "Drew Colthorp", approved: true,  text: "Thanks for the info." }
];

$("#my-template").expand({
  content: "Step 1, light the grill. Step 2...",
  comments: function(el) {
    var approvedComments = [];
    $.each(comments, function(index, comment) {
      if (comment.approved) {
        approvedComments.push({ commenter: comment.author, body: comment.text });
      }
    });
    if (approvedComments.length == 0) {
      return false;
    } else {
      return approvedComments;
    }
  }
})

result.html

<div>
  <span class="content">Step 1, light the grill. Step 2...</span>
  <div class="comments">
    <div class="comment">
      <span class="commenter">Dave Crosby</span>
      <div class="body">Sounds Delicous!</div>
    </div>
    <div class="comment">
      <span class="commenter">Drew Colthorp</span>
      <div class="body">Thanks for the info.</div>
    </div>
  </div>
</div>

template.html

<div id="my-template">
  <span class="content"></span>
  <div class="comments">
    <div class="comment">
      <span class="commenter"></span>
      <div class="body"></div>
    </div>
  </div>
</div>