jquery.expand Examples

jquery.expand is an extremely powerful structural templating library. Looking back on when I first started using it, I realize I was only taking advantage of about 20% of its potential. Here are some examples that should help anyone new to jquery.expand get a head start.

Classes

template

<div id="my-template">
  <h2 class="name"></h2>
  <p class="content"></p>
</div>

expand

$("#my-template").expand({
     name: "Cooking with Crowley",
  content: "Step 1, light the grill. Step 2..."
})

result

<div>
  <h2 class="name">Cooking with Crowley</h2>
  <p class="content">Step 1, light the grill. Step 2...</p>
</div>

Nesting

template

<div id="my-template">
  <h2 class="name"></h2>
  <span class="author">
    Written by <span class="name"/>
  </span>
</div>

expand

$("#my-template").expand({
     name: "Cooking with Crowley",
   author: { name: "Shawn Crowley" }
})

result

<div>
  <h2 class="name">Cooking with Crowley</h2>
  <span class="author">
    Written by <span class="name">Shawn Crowley</span>
  </span>
</div>

Selectors

template

<div id="my-template">
  <h2 class="name"></h2>
  <div class="content">
    <p class="excerpt"/>
  </div>
</div>

expand

$("#my-template").expand({
  "$h2": "Cooking with Crowley",
  "$.content p.excerpt": "Step 1, light the grill. Step 2..."
})

result

<div>
  <h2 class="name">Cooking with Crowley</h2>
  <div class="content">
    <p class="excerpt">Step 1, light the grill. Step 2...</p>
  </div>
</div>

Setting Attributes

template

<div id="my-template">
  <span class="author">
    Written by <a class="name" href=""></a>
  </span>
</div>

expand

$("#my-template").expand({
   name: { "@href": "http://atomicobject.com/pages/Shawn+Crowley" }
})

result

<div>
  <span class="author">
    Written by <a class="name" href="http://atomicobject.com/pages/Shawn+Crowley"/>
  </span>
</div>

Setting Properties

template

<div id="my-template">
  <input type="checkbox" name="like" /> Like
</div>

expand

$("#my-template").expand({
   "$input[name=like]": { ":checked": true }
})

result

<div>
  <input type="checkbox" name="like" checked/> Like
</div>

Calling Functions

template

<div id="my-template">
  <span class="author"></span>
  <input type="text" name="comment" />
</div>

expand

$("#my-template").expand({
  author: { "addClass()": "awesome" },
  "$input[name=comment]": { "val()": "nice post!" }
})

result

<div>
  <span class="author awesome"></span>
  <input type="text" name="comment" value="nice post!" />
</div>

Removing Elements

template

<div id="my-template">
  <span class="author"></span>
</div>

expand

$("#my-template").expand({ author: false })

result

<div></div>

Arrays

template

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

expand

$("#my-template").expand({
  content: "Step 1, light the grill. Step 2...",
  comments: ["Sounds delicious!", "What next?!?"]
})

result

<div>
  <span class="content">Step 1, light the grill. Step 2...</span>
  <div class="comments">
    <div class="comment">Sounds delicious!</div>
    <div class="comment">What next?!?</div>
  </div>
</div>

Functions

template

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

expand

var comments = ["Sounds delicious!", "What next?!?"]; 

// or, if there are no comments
// var comments = [];

$("#my-template").expand({
  content: "Step 1, light the grill. Step 2...",
  comments: function(el) {
    if (comments.length == 0) {
      return false; // this will remove the comments div
    } else {
      return comments;
    }
  }
})

result w/comments

<div>
  <span class="content">Step 1, light the grill. Step 2...</span>
  <div class="comments">
    <div class="comment">Sounds delicious!</div>
    <div class="comment">What next?!?</div>
  </div>
</div>

result w/o comments

<div>
  <span class="content">Step 1, light the grill. Step 2...</span>
</div>

Nesting and Functions and Arrays, oh my!

template

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

expand

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

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