Skip to content

Instantly share code, notes, and snippets.

@subtleGradient

subtleGradient/Declarative Component Mapping Syntax Options.textile

Created December 30, 2010 01:36
Show Gist options
  • Save subtleGradient/759332 to your computer and use it in GitHub Desktop.
Save subtleGradient/759332 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. subtleGradient revised this gist Dec 31, 2010. 1 changed file with 6 additions and 7 deletions.
    13 changes: 6 additions & 7 deletions xample.datagrid.1-1_data-attr.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,16 +1,15 @@
    <meta data-be=DataStore.JSON name=jsonStore content=dataItems.json>
    <meta data-is=DataStore.JSON name=jsonStore content=dataItems.json>

    <meta data-be=Model.Forest name=continentModel
    <meta data-is=Model.Forest name=continentModel
    content=jsonStore data-query=type:continent
    data-root-id=continentRoot data-root-label=Continents data-children-attrs=children
    >

    <table data-be=DataGrid.Tree id=grid data-model=continentModel>
    <table data-is=DataGrid.Tree id=grid data-model=continentModel>
    <thead>
    <tr>
    <th data-field=name style=width:auto>Name</th>
    <th data-field=population style=width:auto>Population</th>
    <th data-field=timezone style=width:auto>Timezone</th>
    </tr>
    <th data-field=name style=width:auto>Name
    <th data-field=population style=width:auto>Population
    <th data-field=timezone style=width:auto>Timezone
    </thead>
    </table>
  2. subtleGradient revised this gist Dec 31, 2010. 1 changed file with 16 additions and 0 deletions.
    16 changes: 16 additions & 0 deletions xample.datagrid.1-1_data-attr.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,16 @@
    <meta data-be=DataStore.JSON name=jsonStore content=dataItems.json>

    <meta data-be=Model.Forest name=continentModel
    content=jsonStore data-query=type:continent
    data-root-id=continentRoot data-root-label=Continents data-children-attrs=children
    >

    <table data-be=DataGrid.Tree id=grid data-model=continentModel>
    <thead>
    <tr>
    <th data-field=name style=width:auto>Name</th>
    <th data-field=population style=width:auto>Population</th>
    <th data-field=timezone style=width:auto>Timezone</th>
    </tr>
    </thead>
    </table>
  3. subtleGradient revised this gist Dec 31, 2010. 1 changed file with 15 additions and 15 deletions.
    30 changes: 15 additions & 15 deletions xample.datagrid.dojo15.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,19 +1,19 @@
    <span dojoType="dojo.data.ItemFileWriteStore"
    jsId="jsonStore" url="countries.json">
    </span>
    <table dojoType="dojox.grid.DataGrid"
    jsid="grid" id="grid"
    store="jsonStore" query="{ name: '*' }" rowsPerPage="20" rowSelector="20px">
    <thead>
    <tr>
    <th field="name" width="300px">Country/Continent Name</th>
    <th field="type" width="auto">Type</th>
    </tr>
    </thead>
    </table>
    <span dojoType="dojo.data.ItemFileWriteStore"
    jsId="jsonStore" data="dataItems"></span>

    <div dojoType="dijit.tree.ForestStoreModel" jsId="continentModel"
    store="jsonStore" query="{type:'continent'}"
    rootId="continentRoot" rootLabel="Continents" childrenAttrs="children"></div>

    <table jsid="grid" dojoType="dojox.grid.TreeGrid" class="grid" treeModel="continentModel">
    <thead>
    <tr>
    <th field="name" width="auto">Name</th>
    <th field="population" width="auto">Population</th>
    <th field="timezone" width="auto">Timezone</th>
    </tr>
    </thead>
    </table>



    <a href="http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/grid/tests/test_data_grid.html">Example taken from Dojo Grid Tests</a>
    <a href="http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/grid/tests/test_treegrid_model.html" title="dojox.grid.TreeGrid Model-based test">Example from Dojo Toolkit dojox.grid.TreeGrid Model-based test</a>
  4. subtleGradient revised this gist Dec 31, 2010. 1 changed file with 19 additions and 0 deletions.
    19 changes: 19 additions & 0 deletions xample.datagrid.dojo15.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,19 @@
    <span dojoType="dojo.data.ItemFileWriteStore"
    jsId="jsonStore" url="countries.json">
    </span>
    <table dojoType="dojox.grid.DataGrid"
    jsid="grid" id="grid"
    store="jsonStore" query="{ name: '*' }" rowsPerPage="20" rowSelector="20px">
    <thead>
    <tr>
    <th field="name" width="300px">Country/Continent Name</th>
    <th field="type" width="auto">Type</th>
    </tr>
    </thead>
    </table>





    <a href="http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/grid/tests/test_data_grid.html">Example taken from Dojo Grid Tests</a>
  5. subtleGradient revised this gist Dec 30, 2010. 1 changed file with 24 additions and 20 deletions.
    44 changes: 24 additions & 20 deletions Declarative Component Mapping Syntax Options.textile
    View file
    Original file line number Diff line number Diff line change
    @@ -1,22 +1,26 @@
    h1. Declarative Component Mapping Syntax Options

    |_._'Valid'_ |_.Mapping |_.CSS Select |_.Example |
    |_.Language / Prior Art |_.CSS Mapping |_.CSS Selector w Args |_.Example with Args |
    |-- |*Multiple* instance *Separate* Args | -- | @new Foo(element); new Bar(element)@ |
    | JavaScript |MooTools | -- | @new Foo(element, {a:"a", bB:"b B", c:{c:1}}); new Bar(element, {d:"d"})@ |
    |NO |1 Element per instance | @[nsType]@ | @<div nsType=foo>@ |
    | HTML attr *Dojo <1.6* |*CSS+* Single + Args | @[nsType=Foo][a=a][bB~=b][bB~=B][c.c=1]@ | @<div nsType=foo a=a bB="b B" c.c=1>@ |
    |YES |1 Element per instance | @[data-ns-type]@ | @<div data-ns="Foo">@ |
    | HTML5 @data-*@ *Dojo 1.6+* |*CSS+* Single + Args | @[data-ns-type=Foo][data-ns-a=a][data-ns-bB~=b][data-ns-bB~=B][data-ns-c.c=1]@ | @<div data-ns="Foo" data-ns-a="a" data-ns-b-b="b B" data-ns-c.c="1">@ |
    |NO |*Multiple* instances Combined Args | @.ad-foo, .ad-bar@ | @<div class="ad-foo ad-bar"></div>@ |
    | @class@ & attr *Apple iAd* |*CSS++* Multi + Args | @.ad-foo[ad-title], .ad-bar[ad-title]@ | @<div class="ad-foo ad-bar" ad-title="MyBarButton"></div>@ |
    |YES |*Multiple* instances Combined Args | @[data-filters]@ | @<div data-filters="ns.foo, ns.bar">@ |
    | HTML5 @data-*@ *Hue Behavior* |*CSS-* All + Args | @[data-filters][data-a=a][data-bB~=b][data-bB~=B]@ | @<div data-filters="ns.foo, ns.bar" data-a="a" data-b-b="b B" data-c='{"c":1}' data-d="d">@ |
    |YES |*Multiple* instances *Separate* Args | @[data-ns]@ | @<div data-ns data-ns.foo data-ns.bar>@ |
    | @data-*@ & CSS |*CSS+* Multi | @[data-ns.foo], [data-ns.bar]@ | @<div data-ns data-ns.foo="a:a; b-b:b B; c{c:1}" data-ns.bar="d:d">@ |
    |NO |*Multiple* instances *Separate* Args | @[ns]@ | @<div ns foo bar>@ |
    | attr & CSS |*CSS+* Multi | @[ns][foo], [ns][bar]@ | @<div ns foo="a:a; b-b:b B; c{c:1}" bar="d:d">@ |
    |YES |*Multiple* instances *Separate* Args | @[data-ns]@ | @<div data-ns="Foo Bar Baz">@ |
    | HTML5 @data-*@ |*CSS+++* Multi + Multi Args | @[data-ns~=Foo][value=Frog]:not([data-foo.value]), [data-ns~=Foo][data-foo.value=Frog]@ | @<div data-ns="Foo Bar Baz" value=HTML data-foo.value=FOO data-bar.value=BAR>@ |
    |NO |*Multiple* instances *Separate* Args | @[ns]@ | @<div ns="Foo Bar Baz">@ |
    | HTML attr |*CSS+++* Multi + Multi Args | @[ns~=Foo][value=Frog]:not([foo.value]), [ns~=Foo][foo.value=Frog]@ | @<div ns="Foo Bar Baz" value=HTML foo.value=FOO bar.value=BAR>@ |
    |_.Language / Prior Art |_._'Valid'_ HTML |_. HTML Mapping |_. Example |_. Example with Args |
    |_._'Valid'_ |_.CSS Selectable |_. CSS Mapping |_. CSS Select |_. CSS Selector w Args |
    | JavaScript *MooTools* | | *Multiple* instance *Separate* Args | @new Foo(element); new Bar(element)@ | @new Foo(element, {a:"a", bB:"b B", c:{c:1}}); new Bar(element, {d:"d"})@ |
    |-- |-- | -- | -- | -- |
    | HTML attr *Dojo <1.6* |NO | 1 Element per instance | @<div nsType=foo>@ | @<div nsType=foo a=a bB="b B" c.c=1>@ |
    | |*CSS: A* | Single + Args | @[nsType]@ | @[nsType=Foo][a=a][bB~=b][bB~=B][c.c=1]@ |
    | @data-*@ *Dojo 1.6+* |YES | 1 Element per instance | @<div data-ns="Foo">@ | @<div data-ns="Foo" data-ns-a="a" data-ns-b-b="b B" data-ns-c.c="1">@ |
    | |*CSS: A* | Single + Args | @[data-ns-type]@ | @[data-ns-type=Foo][data-ns-a=a][data-ns-bB~=b][data-ns-bB~=B][data-ns-c.c=1]@ |
    | @class@ & attr *Apple iAd* |NO | *Multiple* instances Combined Args | @<div class="ad-foo ad-bar"></div>@ | @<div class="ad-foo ad-bar" ad-title="MyBarButton"></div>@ |
    | |*CSS: A+* | Multi + Args | @.ad-foo, .ad-bar@ | @.ad-foo[ad-title], .ad-bar[ad-title]@ |
    | @data-*@ *Hue Behavior* |YES | *Multiple* instances Combined Args | @<div data-filters="ns.foo, ns.bar">@ | @<div data-filters="ns.foo, ns.bar" data-a="a" data-b-b="b B" data-c='{"c":1}' data-d="d">@ |
    | |*CSS: D* | All + Args | @[data-filters]@ | @[data-filters][data-a=a][data-bB~=b][data-bB~=B]@ |
    | @data-*@ & CSS |YES | *Multiple* instances *Separate* Args | @<div data-ns data-ns.foo data-ns.bar>@ | @<div data-ns data-ns.foo="a:a; b-b:b B; c{c:1}" data-ns.bar="d:d">@ |
    | |*CSS: B* | Multi | @[data-ns]@ | @[data-ns.foo], [data-ns.bar]@ |
    | attr & CSS |NO | *Multiple* instances *Separate* Args | @<div ns foo bar>@ | @<div ns foo="a:a; b-b:b B; c{c:1}" bar="d:d">@ |
    | |*CSS: B* | Multi | @[ns]@ | @[ns][foo], [ns][bar]@ |
    | @data-*@ |YES | *Multiple* instances *Separate* Args | @<div data-ns="Foo Bar Baz">@ | @<div data-ns="Foo Bar Baz" value=HTML data-foo.value=FOO data-bar.value=BAR>@ |
    | |*CSS: A++* | Multi + Multi Args | @[data-ns]@ | @[data-ns~=Foo][value=Frog]:not([data-foo.value]), [data-ns~=Foo][data-foo.value=Frog]@ |
    | HTML attr |NO | *Multiple* instances *Separate* Args | @<div ns="Foo Bar Baz">@ | @<div ns="Foo Bar Baz" value=HTML foo.value=FOO bar.value=BAR>@ |
    | |*CSS: A++* | Multi + Multi Args | @[ns]@ | @[ns~=Foo][value=Frog]:not([foo.value]), [ns~=Foo][foo.value=Frog]@ |
    | @data-*@ |YES | *Multiple* instances *Separate* Args | @<div data-ns="Foo, Bar, Baz">@ | @<div data-ns="Foo:value(FOO), Bar:value(BAR), Baz:value(HTML)" value=HTML>@ |
    | |*CSS: D-* | All | @[data-ns]@ | -- |
    | @data-*@ |YES | *Multiple* instances *Separate* Args | @<div data-ns="Foo, Bar, Baz">@ | @<div data-ns="Foo[value=FOO], Bar[value=BAR], Baz[value=HTML]" value=HTML>@ |
    | |*CSS: D-* | All | @[data-ns]@ | -- |
  6. subtleGradient revised this gist Dec 30, 2010. 1 changed file with 9 additions and 9 deletions.
    18 changes: 9 additions & 9 deletions Declarative Component Mapping Syntax Options.textile
    View file
    Original file line number Diff line number Diff line change
    @@ -2,21 +2,21 @@ h1. Declarative Component Mapping Syntax Options

    |_._'Valid'_ |_.Mapping |_.CSS Select |_.Example |
    |_.Language / Prior Art |_.CSS Mapping |_.CSS Selector w Args |_.Example with Args |
    |-- |*Multiple* Class *Separate* Args | -- | @new Foo(element); new Bar(element)@ |
    |-- |*Multiple* instance *Separate* Args | -- | @new Foo(element); new Bar(element)@ |
    | JavaScript |MooTools | -- | @new Foo(element, {a:"a", bB:"b B", c:{c:1}}); new Bar(element, {d:"d"})@ |
    |NO |1 Element per Class | @[nsType]@ | @<div nsType=foo>@ |
    |NO |1 Element per instance | @[nsType]@ | @<div nsType=foo>@ |
    | HTML attr *Dojo <1.6* |*CSS+* Single + Args | @[nsType=Foo][a=a][bB~=b][bB~=B][c.c=1]@ | @<div nsType=foo a=a bB="b B" c.c=1>@ |
    |YES |1 Element per Class | @[data-ns-type]@ | @<div data-ns="Foo">@ |
    |YES |1 Element per instance | @[data-ns-type]@ | @<div data-ns="Foo">@ |
    | HTML5 @data-*@ *Dojo 1.6+* |*CSS+* Single + Args | @[data-ns-type=Foo][data-ns-a=a][data-ns-bB~=b][data-ns-bB~=B][data-ns-c.c=1]@ | @<div data-ns="Foo" data-ns-a="a" data-ns-b-b="b B" data-ns-c.c="1">@ |
    |NO |*Multiple* Classes Combined Args | @.ad-foo, .ad-bar@ | @<div class="ad-foo ad-bar"></div>@ |
    |NO |*Multiple* instances Combined Args | @.ad-foo, .ad-bar@ | @<div class="ad-foo ad-bar"></div>@ |
    | @class@ & attr *Apple iAd* |*CSS++* Multi + Args | @.ad-foo[ad-title], .ad-bar[ad-title]@ | @<div class="ad-foo ad-bar" ad-title="MyBarButton"></div>@ |
    |YES |*Multiple* Classes Combined Args | @[data-filters]@ | @<div data-filters="ns.foo, ns.bar">@ |
    |YES |*Multiple* instances Combined Args | @[data-filters]@ | @<div data-filters="ns.foo, ns.bar">@ |
    | HTML5 @data-*@ *Hue Behavior* |*CSS-* All + Args | @[data-filters][data-a=a][data-bB~=b][data-bB~=B]@ | @<div data-filters="ns.foo, ns.bar" data-a="a" data-b-b="b B" data-c='{"c":1}' data-d="d">@ |
    |YES |*Multiple* Classes *Separate* Args | @[data-ns]@ | @<div data-ns data-ns.foo data-ns.bar>@ |
    |YES |*Multiple* instances *Separate* Args | @[data-ns]@ | @<div data-ns data-ns.foo data-ns.bar>@ |
    | @data-*@ & CSS |*CSS+* Multi | @[data-ns.foo], [data-ns.bar]@ | @<div data-ns data-ns.foo="a:a; b-b:b B; c{c:1}" data-ns.bar="d:d">@ |
    |NO |*Multiple* Classes *Separate* Args | @[ns]@ | @<div ns foo bar>@ |
    |NO |*Multiple* instances *Separate* Args | @[ns]@ | @<div ns foo bar>@ |
    | attr & CSS |*CSS+* Multi | @[ns][foo], [ns][bar]@ | @<div ns foo="a:a; b-b:b B; c{c:1}" bar="d:d">@ |
    |YES |*Multiple* Classes *Separate* Args | @[data-ns]@ | @<div data-ns="Foo Bar Baz">@ |
    |YES |*Multiple* instances *Separate* Args | @[data-ns]@ | @<div data-ns="Foo Bar Baz">@ |
    | HTML5 @data-*@ |*CSS+++* Multi + Multi Args | @[data-ns~=Foo][value=Frog]:not([data-foo.value]), [data-ns~=Foo][data-foo.value=Frog]@ | @<div data-ns="Foo Bar Baz" value=HTML data-foo.value=FOO data-bar.value=BAR>@ |
    |NO |*Multiple* Classes *Separate* Args | @[ns]@ | @<div ns="Foo Bar Baz">@ |
    |NO |*Multiple* instances *Separate* Args | @[ns]@ | @<div ns="Foo Bar Baz">@ |
    | HTML attr |*CSS+++* Multi + Multi Args | @[ns~=Foo][value=Frog]:not([foo.value]), [ns~=Foo][foo.value=Frog]@ | @<div ns="Foo Bar Baz" value=HTML foo.value=FOO bar.value=BAR>@ |
  7. subtleGradient revised this gist Dec 30, 2010. 1 changed file with 20 additions and 20 deletions.
    40 changes: 20 additions & 20 deletions Declarative Component Mapping Syntax Options.textile
    View file
    Original file line number Diff line number Diff line change
    @@ -1,22 +1,22 @@
    h1. Declarative Component Mapping Syntax Options

    |_._'Valid'_ |_.Mapping |_.CSS Select |_.Example |
    |_.Language |_.Prior Art |_.CSS Selector w Args |_.Example with Args|
    |-- | *Multiple* Class *Separate* Args | -- | @new Foo(element); new Bar(element)@ |
    | JavaScript | MooTools | -- | @new Foo(element, {a:"a", bB:"b B", c:{c:1}}); new Bar(element, {d:"d"})@|
    |NO | 1 Element per Class instance | @[nsType]@ | @<div nsType=foo>@ |
    | HTML attr | Dojo <1.6 | @[nsType][a=a][bB~=b][bB~=B][c.c=1]@ | @<div nsType=foo a=a bB="b B" c.c=1>@|
    |YES | 1 Element per Class instance | @[data-ns-type]@ | @<div data-ns="foo">@ |
    | HTML5 @data-*@ | Dojo 1.6+ | @[data-ns-type][data-ns-a=a][data-ns-bB~=b][data-ns-bB~=B][data-ns-c.c=1]@ | @<div data-ns="foo" data-ns-a="a" data-ns-b-b="b B" data-ns-c.c="1">@|
    |NO | *Multiple* Classes per element Combined Args for all instances | @.ad-foo, .ad-bar@ | @<div class="ad-foo ad-bar"></div>@ |
    | @class@ & attr | Apple iAd | @.ad-foo[ad-title], .ad-bar[ad-title]@ | @<div class="ad-foo ad-bar" ad-title="MyBarButton"></div>@|
    |YES | *Multiple* Classes Combined Args for all instances | @[data-filters]@ | @<div data-filters="ns.foo, ns.bar">@ |
    | HTML5 @data-*@ | Hue Behavior | @[data-filters][data-a=a][data-bB~=b][data-bB~=B]@ | @<div data-filters="ns.foo, ns.bar" data-a="a" data-b-b="b B" data-c='{"c":1}' data-d="d">@|
    |YES | *Multiple* Classes *Separate* Args for each instance | @[data-ns]@ | @<div data-ns data-ns.foo data-ns.bar>@ |
    | @data-*@ & CSS | | -- | @<div data-ns data-ns.foo="a:a; b-b:b B; c{c:1}" data-ns.bar="d:d">@|
    |NO | *Multiple* Classes *Separate* Args for each instance | @[ns]@ | @<div ns foo bar>@ |
    | attr & CSS | | -- | @<div ns foo="a:a; b-b:b B; c{c:1}" bar="d:d">@|
    |YES | *Multiple* Classes *Separate* Args for each instance | @[data-ns]@ | @<div data-ns="Foo Bar Baz">@ |
    | HTML5 @data-*@ | | @[data-ns~=Foo][value=Frog]:not([data-foo.value]), [data-ns~=Foo][data-foo.value=Frog]@ | @<div data-ns="Foo Bar Baz" value=HTML data-foo.value=FOO data-bar.value=BAR>@|
    |NO | *Multiple* Classes *Separate* Args for each instance | @[ns]@ | @<div ns="Foo Bar Baz">@ |
    | HTML attr | | @[ns~=Foo][value=Frog]:not([foo.value]), [ns~=Foo][foo.value=Frog]@ | @<div ns="Foo Bar Baz" value=HTML foo.value=FOO bar.value=BAR>@|
    |_._'Valid'_ |_.Mapping |_.CSS Select |_.Example |
    |_.Language / Prior Art |_.CSS Mapping |_.CSS Selector w Args |_.Example with Args |
    |-- |*Multiple* Class *Separate* Args | -- | @new Foo(element); new Bar(element)@ |
    | JavaScript |MooTools | -- | @new Foo(element, {a:"a", bB:"b B", c:{c:1}}); new Bar(element, {d:"d"})@ |
    |NO |1 Element per Class | @[nsType]@ | @<div nsType=foo>@ |
    | HTML attr *Dojo <1.6* |*CSS+* Single + Args | @[nsType=Foo][a=a][bB~=b][bB~=B][c.c=1]@ | @<div nsType=foo a=a bB="b B" c.c=1>@ |
    |YES |1 Element per Class | @[data-ns-type]@ | @<div data-ns="Foo">@ |
    | HTML5 @data-*@ *Dojo 1.6+* |*CSS+* Single + Args | @[data-ns-type=Foo][data-ns-a=a][data-ns-bB~=b][data-ns-bB~=B][data-ns-c.c=1]@ | @<div data-ns="Foo" data-ns-a="a" data-ns-b-b="b B" data-ns-c.c="1">@ |
    |NO |*Multiple* Classes Combined Args | @.ad-foo, .ad-bar@ | @<div class="ad-foo ad-bar"></div>@ |
    | @class@ & attr *Apple iAd* |*CSS++* Multi + Args | @.ad-foo[ad-title], .ad-bar[ad-title]@ | @<div class="ad-foo ad-bar" ad-title="MyBarButton"></div>@ |
    |YES |*Multiple* Classes Combined Args | @[data-filters]@ | @<div data-filters="ns.foo, ns.bar">@ |
    | HTML5 @data-*@ *Hue Behavior* |*CSS-* All + Args | @[data-filters][data-a=a][data-bB~=b][data-bB~=B]@ | @<div data-filters="ns.foo, ns.bar" data-a="a" data-b-b="b B" data-c='{"c":1}' data-d="d">@ |
    |YES |*Multiple* Classes *Separate* Args | @[data-ns]@ | @<div data-ns data-ns.foo data-ns.bar>@ |
    | @data-*@ & CSS |*CSS+* Multi | @[data-ns.foo], [data-ns.bar]@ | @<div data-ns data-ns.foo="a:a; b-b:b B; c{c:1}" data-ns.bar="d:d">@ |
    |NO |*Multiple* Classes *Separate* Args | @[ns]@ | @<div ns foo bar>@ |
    | attr & CSS |*CSS+* Multi | @[ns][foo], [ns][bar]@ | @<div ns foo="a:a; b-b:b B; c{c:1}" bar="d:d">@ |
    |YES |*Multiple* Classes *Separate* Args | @[data-ns]@ | @<div data-ns="Foo Bar Baz">@ |
    | HTML5 @data-*@ |*CSS+++* Multi + Multi Args | @[data-ns~=Foo][value=Frog]:not([data-foo.value]), [data-ns~=Foo][data-foo.value=Frog]@ | @<div data-ns="Foo Bar Baz" value=HTML data-foo.value=FOO data-bar.value=BAR>@ |
    |NO |*Multiple* Classes *Separate* Args | @[ns]@ | @<div ns="Foo Bar Baz">@ |
    | HTML attr |*CSS+++* Multi + Multi Args | @[ns~=Foo][value=Frog]:not([foo.value]), [ns~=Foo][foo.value=Frog]@ | @<div ns="Foo Bar Baz" value=HTML foo.value=FOO bar.value=BAR>@ |
  8. subtleGradient revised this gist Dec 30, 2010. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions Declarative Component Mapping Syntax Options.textile
    View file
    Original file line number Diff line number Diff line change
    @@ -18,3 +18,5 @@ h1. Declarative Component Mapping Syntax Options
    | attr & CSS | | -- | @<div ns foo="a:a; b-b:b B; c{c:1}" bar="d:d">@|
    |YES | *Multiple* Classes *Separate* Args for each instance | @[data-ns]@ | @<div data-ns="Foo Bar Baz">@ |
    | HTML5 @data-*@ | | @[data-ns~=Foo][value=Frog]:not([data-foo.value]), [data-ns~=Foo][data-foo.value=Frog]@ | @<div data-ns="Foo Bar Baz" value=HTML data-foo.value=FOO data-bar.value=BAR>@|
    |NO | *Multiple* Classes *Separate* Args for each instance | @[ns]@ | @<div ns="Foo Bar Baz">@ |
    | HTML attr | | @[ns~=Foo][value=Frog]:not([foo.value]), [ns~=Foo][foo.value=Frog]@ | @<div ns="Foo Bar Baz" value=HTML foo.value=FOO bar.value=BAR>@|
  9. subtleGradient revised this gist Dec 30, 2010. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion Declarative Component Mapping Syntax Options.textile
    View file
    Original file line number Diff line number Diff line change
    @@ -17,4 +17,4 @@ h1. Declarative Component Mapping Syntax Options
    |NO | *Multiple* Classes *Separate* Args for each instance | @[ns]@ | @<div ns foo bar>@ |
    | attr & CSS | | -- | @<div ns foo="a:a; b-b:b B; c{c:1}" bar="d:d">@|
    |YES | *Multiple* Classes *Separate* Args for each instance | @[data-ns]@ | @<div data-ns="Foo Bar Baz">@ |
    | HTML5 @data-*@ | | @[data-ns~=Foo][value=Frog]:not([data-foo.value]), [data-ns~=Foo][data-foo.value=Frog]@ | @<div data-ns="Foo Bar Baz" value=HTML data-foo.value=FOO data-foo.value=BAR>@|
    | HTML5 @data-*@ | | @[data-ns~=Foo][value=Frog]:not([data-foo.value]), [data-ns~=Foo][data-foo.value=Frog]@ | @<div data-ns="Foo Bar Baz" value=HTML data-foo.value=FOO data-bar.value=BAR>@|
  10. subtleGradient revised this gist Dec 30, 2010. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions Declarative Component Mapping Syntax Options.textile
    View file
    Original file line number Diff line number Diff line change
    @@ -16,3 +16,5 @@ h1. Declarative Component Mapping Syntax Options
    | @data-*@ & CSS | | -- | @<div data-ns data-ns.foo="a:a; b-b:b B; c{c:1}" data-ns.bar="d:d">@|
    |NO | *Multiple* Classes *Separate* Args for each instance | @[ns]@ | @<div ns foo bar>@ |
    | attr & CSS | | -- | @<div ns foo="a:a; b-b:b B; c{c:1}" bar="d:d">@|
    |YES | *Multiple* Classes *Separate* Args for each instance | @[data-ns]@ | @<div data-ns="Foo Bar Baz">@ |
    | HTML5 @data-*@ | | @[data-ns~=Foo][value=Frog]:not([data-foo.value]), [data-ns~=Foo][data-foo.value=Frog]@ | @<div data-ns="Foo Bar Baz" value=HTML data-foo.value=FOO data-foo.value=BAR>@|
  11. subtleGradient revised this gist Dec 30, 2010. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion Declarative Component Mapping Syntax Options.textile
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,7 @@
    h1. Declarative Component Mapping Syntax Options

    |_._'Valid'_ |_.Mapping |_.CSS Select |_.Example |
    |_.Language |_.Prior Art |_.CSS Select |_.Example with Args|
    |_.Language |_.Prior Art |_.CSS Selector w Args |_.Example with Args|
    |-- | *Multiple* Class *Separate* Args | -- | @new Foo(element); new Bar(element)@ |
    | JavaScript | MooTools | -- | @new Foo(element, {a:"a", bB:"b B", c:{c:1}}); new Bar(element, {d:"d"})@|
    |NO | 1 Element per Class instance | @[nsType]@ | @<div nsType=foo>@ |
  12. subtleGradient revised this gist Dec 30, 2010. 1 changed file with 16 additions and 8 deletions.
    24 changes: 16 additions & 8 deletions Declarative Component Mapping Syntax Options.textile
    View file
    Original file line number Diff line number Diff line change
    @@ -1,10 +1,18 @@
    h1. Declarative Component Mapping Syntax Options

    |_._'Valid'_|_.Mapping|_.Language|_.Prior Art|_.Example|_.Example with Args|
    |-- |*Multiple* Class *Separate* Args|JavaScript|MooTools |@new Foo(element); new Bar(element)@|@new Foo(element, {a:"a", bB:"b B", c:{c:1}}); new Bar(element, {d:"d"})@|
    |NO |1 Element per Class instance|HTML attr|Dojo <1.6|@<div nsType=foo>@|@<div nsType=foo a=a bB="b B" c.c=1>@|
    |YES |1 Element per Class instance|HTML5 @data-*@|Dojo 1.6+|@<div data-ns="foo">@|@<div data-ns="foo" data-ns-a="a" data-ns-b-b="b B" data-ns-c.c="1">@|
    |NO |*Multiple* Classes per element Combined Args for all instances|@class@ & attr|Apple iAd|@<div class="ad-foo ad-bar"></div>@|@<div class="ad-foo ad-bar" ad-title="MyBarButton"></div>@|
    |YES |*Multiple* Classes Combined Args for all instances|HTML5 @data-*@|Hue Behavior |@<div data-filters="ns.foo, ns.bar">@|@<div data-filters="ns.foo, ns.bar" data-a="a" data-b-b="b B" data-c='{"c":1}' data-d="d">@|
    |YES |*Multiple* Classes *Separate* Args for each instance|@data-*@ & CSS| |@<div data-ns data-ns.foo data-ns.bar>@|@<div data-ns data-ns.foo="a:a; b-b:b B; c{c:1}" data-ns.bar="d:d">@|
    |NO |*Multiple* Classes *Separate* Args for each instance|attr & CSS| |@<div ns foo bar>@|@<div ns foo="a:a; b-b:b B; c{c:1}" bar="d:d">@|
    |_._'Valid'_ |_.Mapping |_.CSS Select |_.Example |
    |_.Language |_.Prior Art |_.CSS Select |_.Example with Args|
    |-- | *Multiple* Class *Separate* Args | -- | @new Foo(element); new Bar(element)@ |
    | JavaScript | MooTools | -- | @new Foo(element, {a:"a", bB:"b B", c:{c:1}}); new Bar(element, {d:"d"})@|
    |NO | 1 Element per Class instance | @[nsType]@ | @<div nsType=foo>@ |
    | HTML attr | Dojo <1.6 | @[nsType][a=a][bB~=b][bB~=B][c.c=1]@ | @<div nsType=foo a=a bB="b B" c.c=1>@|
    |YES | 1 Element per Class instance | @[data-ns-type]@ | @<div data-ns="foo">@ |
    | HTML5 @data-*@ | Dojo 1.6+ | @[data-ns-type][data-ns-a=a][data-ns-bB~=b][data-ns-bB~=B][data-ns-c.c=1]@ | @<div data-ns="foo" data-ns-a="a" data-ns-b-b="b B" data-ns-c.c="1">@|
    |NO | *Multiple* Classes per element Combined Args for all instances | @.ad-foo, .ad-bar@ | @<div class="ad-foo ad-bar"></div>@ |
    | @class@ & attr | Apple iAd | @.ad-foo[ad-title], .ad-bar[ad-title]@ | @<div class="ad-foo ad-bar" ad-title="MyBarButton"></div>@|
    |YES | *Multiple* Classes Combined Args for all instances | @[data-filters]@ | @<div data-filters="ns.foo, ns.bar">@ |
    | HTML5 @data-*@ | Hue Behavior | @[data-filters][data-a=a][data-bB~=b][data-bB~=B]@ | @<div data-filters="ns.foo, ns.bar" data-a="a" data-b-b="b B" data-c='{"c":1}' data-d="d">@|
    |YES | *Multiple* Classes *Separate* Args for each instance | @[data-ns]@ | @<div data-ns data-ns.foo data-ns.bar>@ |
    | @data-*@ & CSS | | -- | @<div data-ns data-ns.foo="a:a; b-b:b B; c{c:1}" data-ns.bar="d:d">@|
    |NO | *Multiple* Classes *Separate* Args for each instance | @[ns]@ | @<div ns foo bar>@ |
    | attr & CSS | | -- | @<div ns foo="a:a; b-b:b B; c{c:1}" bar="d:d">@|
  13. subtleGradient revised this gist Dec 30, 2010. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion Declarative Component Mapping Syntax Options.textile
    View file
    Original file line number Diff line number Diff line change
    @@ -7,4 +7,4 @@ h1. Declarative Component Mapping Syntax Options
    |NO |*Multiple* Classes per element Combined Args for all instances|@class@ & attr|Apple iAd|@<div class="ad-foo ad-bar"></div>@|@<div class="ad-foo ad-bar" ad-title="MyBarButton"></div>@|
    |YES |*Multiple* Classes Combined Args for all instances|HTML5 @data-*@|Hue Behavior |@<div data-filters="ns.foo, ns.bar">@|@<div data-filters="ns.foo, ns.bar" data-a="a" data-b-b="b B" data-c='{"c":1}' data-d="d">@|
    |YES |*Multiple* Classes *Separate* Args for each instance|@data-*@ & CSS| |@<div data-ns data-ns.foo data-ns.bar>@|@<div data-ns data-ns.foo="a:a; b-b:b B; c{c:1}" data-ns.bar="d:d">@|
    |NO |*Multiple* Classes *Separate* Args for each instance|attr & CSS| |@<div foo bar>@|@<div foo="a:a; b-b:b B; c{c:1}" bar="d:d">@|
    |NO |*Multiple* Classes *Separate* Args for each instance|attr & CSS| |@<div ns foo bar>@|@<div ns foo="a:a; b-b:b B; c{c:1}" bar="d:d">@|
  14. subtleGradient revised this gist Dec 30, 2010. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion Declarative Component Mapping Syntax Options.textile
    View file
    Original file line number Diff line number Diff line change
    @@ -6,5 +6,5 @@ h1. Declarative Component Mapping Syntax Options
    |YES |1 Element per Class instance|HTML5 @data-*@|Dojo 1.6+|@<div data-ns="foo">@|@<div data-ns="foo" data-ns-a="a" data-ns-b-b="b B" data-ns-c.c="1">@|
    |NO |*Multiple* Classes per element Combined Args for all instances|@class@ & attr|Apple iAd|@<div class="ad-foo ad-bar"></div>@|@<div class="ad-foo ad-bar" ad-title="MyBarButton"></div>@|
    |YES |*Multiple* Classes Combined Args for all instances|HTML5 @data-*@|Hue Behavior |@<div data-filters="ns.foo, ns.bar">@|@<div data-filters="ns.foo, ns.bar" data-a="a" data-b-b="b B" data-c='{"c":1}' data-d="d">@|
    |YES |*Multiple* Classes *Separate* Args for each instance|@data-*@ & CSS| |@<div data-ns data-ns.foo data-ns.bar>@|@<div data-ns.foo="a:a; b-b:b B; c{c:1}" data-ns.bar="d:d">@|
    |YES |*Multiple* Classes *Separate* Args for each instance|@data-*@ & CSS| |@<div data-ns data-ns.foo data-ns.bar>@|@<div data-ns data-ns.foo="a:a; b-b:b B; c{c:1}" data-ns.bar="d:d">@|
    |NO |*Multiple* Classes *Separate* Args for each instance|attr & CSS| |@<div foo bar>@|@<div foo="a:a; b-b:b B; c{c:1}" bar="d:d">@|
  15. subtleGradient revised this gist Dec 30, 2010. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion Declarative Component Mapping Syntax Options.textile
    View file
    Original file line number Diff line number Diff line change
    @@ -6,5 +6,5 @@ h1. Declarative Component Mapping Syntax Options
    |YES |1 Element per Class instance|HTML5 @data-*@|Dojo 1.6+|@<div data-ns="foo">@|@<div data-ns="foo" data-ns-a="a" data-ns-b-b="b B" data-ns-c.c="1">@|
    |NO |*Multiple* Classes per element Combined Args for all instances|@class@ & attr|Apple iAd|@<div class="ad-foo ad-bar"></div>@|@<div class="ad-foo ad-bar" ad-title="MyBarButton"></div>@|
    |YES |*Multiple* Classes Combined Args for all instances|HTML5 @data-*@|Hue Behavior |@<div data-filters="ns.foo, ns.bar">@|@<div data-filters="ns.foo, ns.bar" data-a="a" data-b-b="b B" data-c='{"c":1}' data-d="d">@|
    |YES |*Multiple* Classes *Separate* Args for each instance|@data-*@ & CSS| |@<div data-ns.foo data-ns.bar>@|@<div data-ns.foo="a:a; b-b:b B; c{c:1}" data-ns.bar="d:d">@|
    |YES |*Multiple* Classes *Separate* Args for each instance|@data-*@ & CSS| |@<div data-ns data-ns.foo data-ns.bar>@|@<div data-ns.foo="a:a; b-b:b B; c{c:1}" data-ns.bar="d:d">@|
    |NO |*Multiple* Classes *Separate* Args for each instance|attr & CSS| |@<div foo bar>@|@<div foo="a:a; b-b:b B; c{c:1}" bar="d:d">@|
  16. subtleGradient revised this gist Dec 30, 2010. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions Declarative Component Mapping Syntax Options.textile
    View file
    Original file line number Diff line number Diff line change
    @@ -7,3 +7,4 @@ h1. Declarative Component Mapping Syntax Options
    |NO |*Multiple* Classes per element Combined Args for all instances|@class@ & attr|Apple iAd|@<div class="ad-foo ad-bar"></div>@|@<div class="ad-foo ad-bar" ad-title="MyBarButton"></div>@|
    |YES |*Multiple* Classes Combined Args for all instances|HTML5 @data-*@|Hue Behavior |@<div data-filters="ns.foo, ns.bar">@|@<div data-filters="ns.foo, ns.bar" data-a="a" data-b-b="b B" data-c='{"c":1}' data-d="d">@|
    |YES |*Multiple* Classes *Separate* Args for each instance|@data-*@ & CSS| |@<div data-ns.foo data-ns.bar>@|@<div data-ns.foo="a:a; b-b:b B; c{c:1}" data-ns.bar="d:d">@|
    |NO |*Multiple* Classes *Separate* Args for each instance|attr & CSS| |@<div foo bar>@|@<div foo="a:a; b-b:b B; c{c:1}" bar="d:d">@|
  17. subtleGradient revised this gist Dec 30, 2010. 1 changed file with 5 additions and 5 deletions.
    10 changes: 5 additions & 5 deletions Declarative Component Mapping Syntax Options.textile
    View file
    Original file line number Diff line number Diff line change
    @@ -2,8 +2,8 @@ h1. Declarative Component Mapping Syntax Options

    |_._'Valid'_|_.Mapping|_.Language|_.Prior Art|_.Example|_.Example with Args|
    |-- |*Multiple* Class *Separate* Args|JavaScript|MooTools |@new Foo(element); new Bar(element)@|@new Foo(element, {a:"a", bB:"b B", c:{c:1}}); new Bar(element, {d:"d"})@|
    |NO |Single Class|HTML attr|Dojo <1.6|@<div nsType=foo>@|@<div nsType=foo a=a bB="b B" c.c=1>@|
    |YES |Single Class|HTML5 @data-*@|Dojo 1.6+|@<div data-ns="foo">@|@<div data-ns="foo" data-ns-a="a" data-ns-b-b="b B" data-ns-c.c="1">@|
    |NO |*Multiple* Classes Combined Args|@class@ & attr|Apple iAd|@<div class="ad-foo ad-bar"></div>@|@<div class="ad-foo ad-bar" ad-title="MyBarButton"></div>@|
    |YES |*Multiple* Classes Combined Args|HTML5 @data-*@|Hue Behavior |@<div data-filters="ns.foo, ns.bar">@|@<div data-filters="ns.foo, ns.bar" data-a="a" data-b-b="b B" data-c='{"c":1}' data-d="d">@|
    |YES |*Multiple* Classes *Separate* Args|@data-*@ & CSS| |@<div data-ns.foo data-ns.bar>@|@<div data-ns.foo="a:a; b-b:b B; c{c:1}" data-ns.bar="d:d">@|
    |NO |1 Element per Class instance|HTML attr|Dojo <1.6|@<div nsType=foo>@|@<div nsType=foo a=a bB="b B" c.c=1>@|
    |YES |1 Element per Class instance|HTML5 @data-*@|Dojo 1.6+|@<div data-ns="foo">@|@<div data-ns="foo" data-ns-a="a" data-ns-b-b="b B" data-ns-c.c="1">@|
    |NO |*Multiple* Classes per element Combined Args for all instances|@class@ & attr|Apple iAd|@<div class="ad-foo ad-bar"></div>@|@<div class="ad-foo ad-bar" ad-title="MyBarButton"></div>@|
    |YES |*Multiple* Classes Combined Args for all instances|HTML5 @data-*@|Hue Behavior |@<div data-filters="ns.foo, ns.bar">@|@<div data-filters="ns.foo, ns.bar" data-a="a" data-b-b="b B" data-c='{"c":1}' data-d="d">@|
    |YES |*Multiple* Classes *Separate* Args for each instance|@data-*@ & CSS| |@<div data-ns.foo data-ns.bar>@|@<div data-ns.foo="a:a; b-b:b B; c{c:1}" data-ns.bar="d:d">@|
  18. subtleGradient revised this gist Dec 30, 2010. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion Declarative Component Mapping Syntax Options.textile
    View file
    Original file line number Diff line number Diff line change
    @@ -5,5 +5,5 @@ h1. Declarative Component Mapping Syntax Options
    |NO |Single Class|HTML attr|Dojo <1.6|@<div nsType=foo>@|@<div nsType=foo a=a bB="b B" c.c=1>@|
    |YES |Single Class|HTML5 @data-*@|Dojo 1.6+|@<div data-ns="foo">@|@<div data-ns="foo" data-ns-a="a" data-ns-b-b="b B" data-ns-c.c="1">@|
    |NO |*Multiple* Classes Combined Args|@class@ & attr|Apple iAd|@<div class="ad-foo ad-bar"></div>@|@<div class="ad-foo ad-bar" ad-title="MyBarButton"></div>@|
    |YES |*Multiple* Classes Combined Args|HTML5 @data-*@|Hue Behavior |@<div data-filters="ns.foo, ns.bar">@|@<div data-filters="ns.foo, ns.bar" data-a="a" data-b-b="b B" data-d="d">@|
    |YES |*Multiple* Classes Combined Args|HTML5 @data-*@|Hue Behavior |@<div data-filters="ns.foo, ns.bar">@|@<div data-filters="ns.foo, ns.bar" data-a="a" data-b-b="b B" data-c='{"c":1}' data-d="d">@|
    |YES |*Multiple* Classes *Separate* Args|@data-*@ & CSS| |@<div data-ns.foo data-ns.bar>@|@<div data-ns.foo="a:a; b-b:b B; c{c:1}" data-ns.bar="d:d">@|
  19. subtleGradient created this gist Dec 30, 2010.
    9 changes: 9 additions & 0 deletions Declarative Component Mapping Syntax Options.textile
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,9 @@
    h1. Declarative Component Mapping Syntax Options

    |_._'Valid'_|_.Mapping|_.Language|_.Prior Art|_.Example|_.Example with Args|
    |-- |*Multiple* Class *Separate* Args|JavaScript|MooTools |@new Foo(element); new Bar(element)@|@new Foo(element, {a:"a", bB:"b B", c:{c:1}}); new Bar(element, {d:"d"})@|
    |NO |Single Class|HTML attr|Dojo <1.6|@<div nsType=foo>@|@<div nsType=foo a=a bB="b B" c.c=1>@|
    |YES |Single Class|HTML5 @data-*@|Dojo 1.6+|@<div data-ns="foo">@|@<div data-ns="foo" data-ns-a="a" data-ns-b-b="b B" data-ns-c.c="1">@|
    |NO |*Multiple* Classes Combined Args|@class@ & attr|Apple iAd|@<div class="ad-foo ad-bar"></div>@|@<div class="ad-foo ad-bar" ad-title="MyBarButton"></div>@|
    |YES |*Multiple* Classes Combined Args|HTML5 @data-*@|Hue Behavior |@<div data-filters="ns.foo, ns.bar">@|@<div data-filters="ns.foo, ns.bar" data-a="a" data-b-b="b B" data-d="d">@|
    |YES |*Multiple* Classes *Separate* Args|@data-*@ & CSS| |@<div data-ns.foo data-ns.bar>@|@<div data-ns.foo="a:a; b-b:b B; c{c:1}" data-ns.bar="d:d">@|