Commits

Stephen McKamey committed 594a5ab

- adding more documentation

  • Participants
  • Parent commits fab606e

Comments (0)

Files changed (3)

File Examples.wiki

+= DUEL Example Views =
+
+=== Example View ===
 
 Here is a complete example where the result differs if there is zero, one, or many items.
 
-in foo.bar.duel
 {{{
 #!application/x-jsp
 
-== Welcome ==
+= [[http://duelengine.org|DUEL: The 'V' in MVC]] =
 
-Welcome to your wiki! This is the default page we've installed for your convenience. Go ahead and edit it.
+DUEL is a [[http://ajaxpatterns.org/Dual-Side_Templating|dual-side templating]] engine using HTML for layout and pure JavaScript as the binding language. Views may be executed both directly in the browser (client-side template) or on the server (server-side template).
 
-=== Wiki features ===
+=== [[Syntax|Syntax]] ===
 
-This wiki uses the [[http://www.wikicreole.org/|Creole]] syntax, and is fully compatible with the 1.0 specification.
+The syntax for DUEL views is concise and easy to remember.
 
-The wiki itself is actually a hg repository, which means you can clone it, edit it locally/offline, add images or any other file type, and push it back to us. It will be live immediately.
+=== [[Examples|Examples]] ===
 
-Go ahead and try:
+See how easy it is to define and use DUEL views.
 
-{{{
-$ hg clone http://bitbucket.org/mckamey/duelwiki/
-}}}
+=== [[http://duelengine.org/license.txt|License]] ===
 
-Wiki pages are normal files, with the .wiki extension. You can edit them locally, as well as creating new ones.
-
-=== Syntax highlighting ===
-
-You can also highlight snippets of text, we use the excellent [[http://www.pygments.org/|Pygments]] library.
-
-Here's an example of some Python code:
-
-{{{
-#!python
-
-def wiki_rocks(text):
-	formatter = lambda t: "funky"+t
-	return formatter(text)
-}}}
-
-You can check out the source of this page to see how that's done, and make sure to bookmark [[http://pygments.org/docs/lexers/|the vast library of Pygment lexers]], we accept the 'short name' or the 'mimetype' of anything in there.
-
-Have fun!
+DUEL is licensed under the [[http://duelengine.org/license.txt|MIT license]].
+= DUEL Syntax =
+
+The DUEL grammar is an intentionally small, familiar syntax. Each term is intended to be intuitive to remember and is short without abbreviations. DUEL views are defined as HTML/CSS/JavaScript with a small set of special markup tags to control flow and JavaScript code blocks to bind the view template to model data.
+
+The goal is to deliberately keep the syntax minimal. It should be easy to remember and nothing should need to be looked up during usage.
+
+== Markup ==
+
+The *complete* set of DUEL markup is:
+
+=== View declaration {{{<%@ view name="�" %>}}} ===
+
+Sits at the top of a view to define its metadata. The {{{name}}} attribute contains a string literal which defines the name of view type.
+
+=== Loop construct {{{<for each="�">�</for>}}} ===
+
+Wrapped around content to be repeated once per item. The {{{each}}} attribute contains an {{{object}}} expression defining the list of items to iterate over.
+
+=== Conditional block {{{<if test="�">�</if>}}} ===
+
+Wrapped around conditional content. The {{{test}}} attribute contains a {{{boolean}}} expression indicating if contents should be included in result.
+
+=== Alternate conditionals {{{<else if="�">}}} or {{{<else>}}} ===
+
+Sits inside an {{{<if></if>}}} block without a closing tag (alternatively {{{<else test="�">}}} for symmetry with {{{<if test="�">}}}). The {{{if}}} attributes (alternatively {{{test}}} may be used) contains a {{{boolean}}} expression indicating if contents should be included in result.
+
+=== Single element conditional {{{<div if="�">�</div>}}} ===
+
+May be applied to any HTML tag to make it conditionally render. The {{{if}}} attribute contains a {{{boolean}}} expression indicating if contents should be included in result.
+
+=== Embed other views {{{<call view="�" model="�" index="�" count="�"></call>}}} ===
+
+Calls another template specifying the data to bind. The {{{view}}} attribute is the name of the view to bind, the {{{model}}} attribute defines the data to bind, and optionally {{{index}}} and {{{count}}} attributes may be specified to indicate which item of a list is being bound (item {{{index}}} of {{{count}}} items).
+
+=== Partial views {{{<part name="�">�</part>}}} ===
+
+Sits inside a view as a placeholder for replacement content, or within a {{{<call></call>}}} block to define the replacement content. The {{{name}}} attribute is a {{{string}}} expression specifying the name of the part to replace.
+
+== Code Blocks ==
+
+Code blocks contain 100% pure JavaScript, so there isn't a new language to learn. There are three types of code blocks available:
+
+=== Statement Blocks {{{<% � %>}}} ===
+
+When code within a statement block is executed, if any value is returned it will be emitted as part of the output.
+
+=== Expression Blocks {{{<%= � %>}}} ===
+
+When code within an expression block is executed, the result of will be emitted as part of the output, interpretted as plain text (equivalent to {{{<% return (�); %>}}}).
+
+=== Markup Expression Block {{{<%# � %>}}} ===
+
+When code within a markup expression block is executed, the result will be emitted as part of the output, interpreted as HTML. NOTE: these blocks are rarely used (only when data itself contains markup).
+
+== Data Values ==
+
+The data values available inside the JavaScript code blocks are:
+
+* {{{model}}} contains the model data being bound to the view template
+* {{{index}}} used within loops to indicate the index of the current item being bound
+* {{{count}}} used within loops to indicate total number of items being bound