Skip to content

Instantly share code, notes, and snippets.

@pbuzdin

pbuzdin/index.html

Created April 17, 2019 00:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pbuzdin/8de74150e9356940d7eaf7b72e815926 to your computer and use it in GitHub Desktop.
Save pbuzdin/8de74150e9356940d7eaf7b72e815926 to your computer and use it in GitHub Desktop.
Download ZIP
Synless test // source https://jsbin.com/kusixas
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Synless test</title>
</head>
<body>
<div id="template">
<h1 sl-text="data.heading"></h1>
<p sl-if="data.logged_in">Hello, <span sl-text="data.name"></span>!</p>
<p sl-else>Hey, stranger. Maybe <a sl-attr:href="data.login_url">log in</a>?</p>
<b>Recent Members</b>
<ul>
<li sl-each="data.recent_members" sl-as="member">
<span sl-text="member.name"></span> Joined On
<time sl-attr:datetime="member.join_date" sl-text="member.formatted_date()"></time>
</li>
<li sl-empty="data.recent_members">No Recent Members</li>
</ul>
<button type="button" sl-prop:disabled="data.close_disabled">Close</button>
</div>
<script src=" https://cdnjs.cloudflare.com/ajax/libs/incremental-dom/0.6.0/incremental-dom-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/mawelborn/synless/synless-min.js"></script>
<script>
var template = Synless.template(document.querySelector("#template").childNodes);
template(document.body, {
heading: "Synless Templates",
logged_in: true,
name: "John",
recent_members: [
{name: "Jane", join_date: "1970-01-01", formatted_date: function() { console.log('hui')}},
],
close_disabled: false
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment