diff --git a/package.json b/package.json index 9fe65a5e0f3f776522d88a7eb628d5d6c7b1bd5e..65a76b792dbd52fff11e4d87e9697d7f679cf955 100644 --- a/package.json +++ b/package.json @@ -1,11 +1,11 @@ { - "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 " + "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 " , "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" } } diff --git a/readme.md b/readme.md index 8a6dc8d2acff787b122f365d45c5b1eb34e9ab1c..ab22998eef853eadc465284b2f75906c050ccb57 100644 --- a/readme.md +++ b/readme.md @@ -1,11 +1,11 @@ - + -Tally Hello Badge Example: Text & Attribute (part 1 of 4) +Set Hello Badge Example: Text & 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. -```

Hello, my name is Inigo Montoya

``` +```

Hello, my name is Inigo Montoya

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

Hello, my name is Inigo Montoya

``` +```

Hello, my name is Inigo Montoya

``` 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 diff --git a/server.coffee b/server.coffee index 34f623f75c06c22ac2dd4c30e1596fad31b43e7b..e02ee1a8fbb924881180fa1c6129e50468c299e0 100644 --- a/server.coffee +++ b/server.coffee @@ -1,8 +1,8 @@ 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') diff --git a/views/css/styles.css b/views/css/styles.css index 3af3f45750cea04d4e3a0d632079c249d535de82..1295693c583272f6ce845d9cb586253ba22f5b93 100644 --- a/views/css/styles.css +++ b/views/css/styles.css @@ -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. */ diff --git a/views/hello-badge.html b/views/hello-badge.html index b8e5fd7a90a612c2012b2a85687106a64f4cbe9f..7a1c7d723459b73e40119da121c598661d41ddf9 100644 --- a/views/hello-badge.html +++ b/views/hello-badge.html @@ -1,12 +1,12 @@ - Hello Badge #1: data-tally-text and data-tally-attribute attributes. + Hello Badge #1: data-set-text and data-set-attribute attributes. -

Hello, my name is Inigo Montoya

+

Hello, my name is Inigo Montoya

\ No newline at end of file