Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

yplate (gallery-yplate) on cdn

Last Updated: 06/7/11

+ 1 -

Henrik Tellander

YUI Contributor

Created: 02/13/11
Last CDN Push: 06/8/11
Build Tag: gallery-2011.06.08-20-04
Project: YUI 3
License: YUI BSD
YUI Version: 3.3.0
Free for use.

See http://kwa.github.com/yplate/ for straight forward examples and description of the API. The same set of examples are in the github repo. Download the repo, open the examples file in your browser, and the examples will execute on page load.

A sample use-case for yplate. First create an instance of yplate. Next, supply parameters to one of the templating functions (in this case the parameters are a template-node and the a JSON model). Finally, append the resulting html (NodeList) to the ouput div.
Checkout the result here: http://kwa.github.com/yplate/#twohalf

You usually only need to use two "statement constructs" they are the "print statement" '<%= ,,,, %>' and the "javascript code statement" '<% %>'. Using these you can create arbitrarily complex templates. (If you have written JSP scriptlets (JavaServerPages) then this should be familiar).

Code Sample

<script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script>

<p>Result: (http://kwa.github.com/yplate/#twohalf)</p>
<div id="hotelList"></div>
<script type="text/x-yplate-template" id="hotelItem">
<![CDATA[
<div class="hotelListWrap">
  <div class="imgWrap" style="float:<%= this.float %>;">
    <img src="<%= this.img %>" height="<%= this.height %>" alt=""/>
  </div>
  <% var css = this.float == "left" ? "padText": ""; %>
  <div class="<%= css %>">
    <div class="hotelName"><%= this.hotelName %></div>
    <div>
    <% for(var i = 0; i < this.numStars; i++) { %>*<% } %>
    </div>
    <div><%= this.description %></div>
  </div>
</div>
 ]]>
</script>
<script type="text/javascript">
  YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2011.06.08-20-04'
}).use('yplate', function (Y) {
  var api = new Y.yplate();
  var modelList = [{img:"img/house-blue.png", height:"100px", float:"left", numStars:5, hotelName:"Hotel Blue", description:"This is a mostly blue hotel."},
                   {img:"img/house-red.png", height:"100px", float:"right", numStars:4, hotelName:"Hotel Red", description:"This is kind of a redish hotel."},
                   {img:"img/house-pink.png", height:"100px", float:"left", numStars:3, hotelName:"Hotel Pink", description:"This is a hotel with a pink background."},
                   {img:"img/house-purple.png", height:"100px", float:"right", numStars:2, hotelName:"Hotel Purple", description:"This is a colorful hotel."}];
  var nodeList = api.plate(Y.one("#hotelItem"), modelList);
  Y.one("#hotelList").append(nodeList);
  });
</script>

<p>Result: (http://kwa.github.com/yplate/#twohalf)</p>
<div id="hotelList"></div>
<script type="text/x-yplate-template" id="hotelItem">
<![CDATA[
<div class="hotelListWrap">
  <div class="imgWrap" style="float:<%= this.float %>;">
    <img src="<%= this.img %>" height="<%= this.height %>" alt=""/>
  </div>
  <% var css = this.float == "left" ? "padText": ""; %>
  <div class="<%= css %>">
    <div class="hotelName"><%= this.hotelName %></div>
    <div>
    <% for(var i = 0; i < this.numStars; i++) { %>*<% } %>
    </div>
    <div><%= this.description %></div>
  </div>
</div>
 ]]>
</script>
<script type="text/javascript">
  YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2011.06.08-20-04'
}).use('yplate', function (Y) {
  var api = new Y.yplate();
  var modelList = [{img:"img/house-blue.png", height:"100px", float:"left", numStars:5, hotelName:"Hotel Blue", description:"This is a mostly blue hotel."},
                   {img:"img/house-red.png", height:"100px", float:"right", numStars:4, hotelName:"Hotel Red", description:"This is kind of a redish hotel."},
                   {img:"img/house-pink.png", height:"100px", float:"left", numStars:3, hotelName:"Hotel Pink", description:"This is a hotel with a pink background."},
                   {img:"img/house-purple.png", height:"100px", float:"right", numStars:2, hotelName:"Hotel Purple", description:"This is a colorful hotel."}];
  var nodeList = api.plate(Y.one("#hotelItem"), modelList);
  Y.one("#hotelList").append(nodeList);
  });
</script>

Forum Posts

Subject	Author	Date
How long before this goes live?	Andrew Wooldridge	02/17/11
Re: How long before this goes live?	Henrik Tellander	02/17/11
Yplate is now on the CDN	Henrik Tellander	02/20/11
Re: How long before this goes live?	Henrik Tellander	06/7/11