Ind.ie is now Small Technology Foundation.
Commit 48a9c259 authored by Aral Balkan's avatar Aral Balkan

Renamed to Set.

parent 080b63b6
{
"name": "tally-hello-badge-1-text-and-attribute"
, "description": "Hello Badge example #1: Demonstrates the data-tally-text and data-tally-attribute attributes."
, "version": "0.0.1"
, "author": "Aral Balkan <aral@aralbalkan.com>"
"name": "set-hello-badge-1-text-and-attribute"
, "description": "Hello Badge example #1: Demonstrates the data-set-text and data-set-attribute attributes."
, "version": "0.0.3"
, "author": "Aral Balkan <aral@ind.ie>"
, "dependencies": {
"express": "3.0.x"
, "tally": "*"
, "indie-set": "*"
}
, "devDependencies": {
"coffee-script": "1.6.1"
......@@ -15,6 +15,6 @@
}
, "license": "MIT"
, "engines": {
"node": "0.8.x"
"node": "0.11.x"
}
}
<img src='http://aralbalkan.com/images/tally-hello-world.png'>
<img src='http://aralbalkan.com/images/set-hello-world.png'>
Tally Hello Badge Example: Text &amp; Attribute (part 1 of 4)
Set Hello Badge Example: Text &amp; Attribute (part 1 of 4)
===
This is a very simple example for the [Tally template engine](http://tally.jit.su) ([fork Tally on GitHub](https://github.com/aral/tally)).
This is a very simple example for the [Set template engine](http://set.jit.su) ([fork Set on GitHub](https://github.com/aral/set)).
It demonstrates how to set up Tally for use with [Express 3](http://expressjs.com) and how to use the ```data-tally-text``` and ```data-tally-attribute``` attributes to set the value of the text and attribute of a DOM element.
It demonstrates how to set up Set for use with [Express 3](http://expressjs.com) and how to use the ```data-set-text``` and ```data-set-attribute``` attributes to set the value of the text and attribute of a DOM element.
Usage
---
......@@ -21,7 +21,7 @@ Read the notes below to find out how it works and take a peek at the source code
How it works
---
Templates in Tally are pure HTML 5. Tally uses ```data-``` attributes to populate templates either on the server or on the client (or both).
Templates in Set are pure HTML 5. Set uses ```data-``` attributes to populate templates either on the server or on the client (or both).
In this simple example, we want to create a simple name badge that links back to the user’s home page.
......@@ -32,15 +32,15 @@ The template
Let’s start by creating a template called ```hello-badge.html``` in the ```/views``` folder. It will contain a paragraph tag to hold the title of the label (’Hello, my name is’) and a nested span into which the name of the user will be added when the template is compiled.
```<p>Hello, my name is <span data-tally-text='name'>Inigo Montoya</span></p>```
```<p>Hello, my name is <span data-set-text='name'>Inigo Montoya</span></p>```
The attribute ```data-tally-text``` tells Tally to replace the text of the ```span``` tag with the property ```name``` that’s in the data provided to the template.
The attribute ```data-set-text``` tells Set to replace the text of the ```span``` tag with the property ```name``` that’s in the data provided to the template.
Since Tally templates are pure HTML, you can design in the browser with the template even before the server is ready (and work on both can continue in parallel). Unlike Moustache‐style template engines like Handlebars, etc., your template is What You See Is What You Get.
Since Set templates are pure HTML, you can design in the browser with the template even before the server is ready (and work on both can continue in parallel). Unlike Moustache‐style template engines like Handlebars, etc., your template is What You See Is What You Get.
Next, we wrap the paragraph tag in an anchor tag for the link. This time, instead of the text of the anchor tag, we want to change its ```href``` attribute, so we use the ```data-tally-attribute``` attribute instead.
Next, we wrap the paragraph tag in an anchor tag for the link. This time, instead of the text of the anchor tag, we want to change its ```href``` attribute, so we use the ```data-set-attribute``` attribute instead.
```<a data-tally-attribute='href homepage'><p>Hello, my name is <span data-tally-text='name'>Inigo Montoya</span></p></a>```
```<a data-set-attribute='href homepage'><p>Hello, my name is <span data-set-text='name'>Inigo Montoya</span></p></a>```
To specify multiple attributes, just separate them with a semicolon.
......@@ -51,10 +51,10 @@ The server couldn’t be simpler. Here’s all the code:
```javascript
express = require 'express'
tally = require 'tally'
set = require 'set'
app = express()
app.engine 'html', tally.__express
app.engine 'html', set.__express
app.set 'view engine', 'html'
app.use express.static('views')
......@@ -73,16 +73,16 @@ We set up Express and create a static data object with ```name``` and ```homepag
That’s it!
Unlike other unobtrusive frameworks like Plates and Notemplate, Tally has no mapping code to write. It just works.
Unlike other unobtrusive frameworks like Plates and Notemplate, Set has no mapping code to write. It just works.
Continue learning about Tally in [Part 2: Repetition](https://github.com/aral/tally-hello-badge-2-repetition).
Continue learning about Set in [Part 2: Repetition](https://github.com/aral/set-hello-badge-2-repetition).
Table of Contents
---
* Part 1: Text and Attribute
* Part 2: [Repetition](https://github.com/aral/tally-hello-badge-2-repetition)
* Part 3: [Conditionals](https://github.com/aral/tally-hello-badge-3-conditionals)
* Part 4: [Dummy Data](https://github.com/aral/tally-hello-badge-4-dummy-data)
* Part 2: [Repetition](https://www.npmjs.org/package/set-hello-badge-2-repetition)
* Part 3: [Conditionals](https://www.npmjs.org/package/set-hello-badge-3-conditionals)
* Part 4: [Dummy Data](https://www.npmjs.org/package/set-hello-badge-4-dummy-data)
This is just a very simple example. [Check out the Tally web site](http://tally.jit.su) for more complicated ones.
\ No newline at end of file
This is just a very simple example. [Check out the Set web site](http://set.jit.su) for more complicated ones.
\ No newline at end of file
express = require 'express'
tally = require 'tally'
set = require 'indie-set'
app = express()
app.engine 'html', tally.__express
app.engine 'html', set.__express
app.set 'view engine', 'html'
app.use express.static('views')
......
......@@ -18,7 +18,7 @@ p
box-shadow: .104166667em .104166667em .104166667em #ccc; /* 5px / 48px */
}
[data-tally-text='name']
[data-set-text='name']
{
display: block;
word-wrap: break-word; /* So long names don’t break out of the tag. */
......
<!doctype html>
<html lang='en'>
<head>
<title>Hello Badge #1: data-tally-text and data-tally-attribute attributes.</title>
<title>Hello Badge #1: data-set-text and data-set-attribute attributes.</title>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width'>
<link rel='stylesheet' href='css/styles.css'>
</head>
<body>
<a data-tally-attribute='href homepage'><p>Hello, my name is <span data-tally-text='name'>Inigo Montoya</span></p></a>
<a data-set-attribute='href homepage'><p>Hello, my name is <span data-set-text='name'>Inigo Montoya</span></p></a>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment