Nxs autotemplate - xkp/Doc GitHub Wiki

##Overview

Excess existential objective is to slash complexity and approach the theoretical minimum code that must be written for any particular task. I see a lot of complexity in traditional (think php) templating solutions. Such systems work by embedding code into static html pages in order to produce dynamic pages. Here are the problems to such approach:

  • Your code base expands, every modified html file becomes part of it. In a very obscure way, too; since your code becomes surrounded by all those lovely html tags.

  • Your site becomes attached to a particular html, if you want to change your design you must rewrite your code. Or, you know, perform a painful merge.

So, node.xs proposes a solution where the HTML templates will be completely UNADULTERED.

Usage

AutoTemplates are based on the idea that html elements are uniquely identifiable by its 'id' tag and that the dynamic content will be added as either attributes to html tags or as text inside those tags. The steps involved in setting up AutoTemplates are:

1- Define the dynamic elements in your template:

<page id="<Your page name>" src="<Your html template>">
    <element id="<Dynamic element id>"/>
    ...
</page>
Id validity

The ids in the html page must be valid xs ids since they will be used in code on step 2.

Template interface

Please note that by defining the set of elements you will use you will be creating an enforceable contract between your code and your template. And that any page that contains all the elements will be a valid target for your page.

This could allow you to have a Development site, a Production site and an Experimental site all running at the same without touching a single line of your code. Conversely, the compiler will let you know when a page is not suitable for your code. How cool is that, seriously?

2- Assigning dynamic values

Once you have your dynamic values (from your database or whatever source) you simply modify the element as if it were a normal object when rendering your page:

on <Your page>.render(<page arguments>)
{
    <Dynamic element id>.<html attribute> = <value>;
    or
    <Dynamic element id>.inner_html = <value>;
}

Example:

Your template:

<html>
  <body>
      Hello, <b id="user_name"></b>, log out here: <a id="logout_link"/>
  </body>
</html>

Your definition:

<page id="test">
    <element id="user_name"/>
    <element id="logout_link"/>
</page>

Page implementation:

on test.render()
{
    var user = get_user_name(); //your logic

    user_name.inner_html = user;
    logout_link.href = "/logout?user=" + user;
}

Replicators

Aside dynamically modifying elements, it is a very common task to repeat visual elements based on a dynamic list of items. Every item is typically rendered uniformly except for its dynamic data. AutoTemplates offer a construct named "replicator" to easily implement this case.

Replicators are represented in HTML as elements that contain exactly one child which will later be replicated. That child will behave as a web page in the sense that it will contain dynamics elements which values will be resolved at run time.

In code, replicators are rendered by assigning the 'data' property which must be an array of the items to be displayed.

Usage

1- Define the replicator in your template:

<page id="<Your page name>" src="<Your html template>">
    <replicator id="<Replicator element id>">
        <element id="<Replicator element id>"/>
        ...
    </replicator>
</page>

2- Implement the replicator in your code:

on <Your page>.render()
{
    var rdata = array_from_your_logic();
    <Your replicator>.data = rdata;
}

on <Your page>.<Your replicator>.render(item)
{
    <Replicator element>.<attribute> = item.<Dynamic Value>;
}

Example

Your template:

<html>
  <body>
      <h3>Friends</h3>
      <ul id="myReplicator">
        <li><b id="friend_name"></b> <a id="friend_profile">view profile</a>
  </body>
</html>

Your definition:

<page id="test">
    <replicator id="myReplicator">
        <element id="friend_name"/>
        <element id="friend_profile"/>
    </replicator>
</page>

Page implementation:

on test.render()
{
    array friends = get_friends(); //your logic
    myReplicator.data = friends;
}


on test.myReplicator.render(friend)
{
    friend_name.inner_text = friend.name; 
    friend_profile.href = "/view_profile?userid=" + friend.id;
}
Add a custom footer
⚠️ **GitHub.com Fallback** ⚠️