diff --git a/build/modelview.js b/build/modelview.js
index 5fc28f9..a187289 100644
--- a/build/modelview.js
+++ b/build/modelview.js
@@ -2,7 +2,7 @@
*
* ModelView.js
* @version: 0.62
-* @built on 2015-07-11 23:53:22
+* @built on 2015-07-12 14:09:15
*
* A simple/extendable MV* (MVVM) framework
* optionaly integrates into both jQuery as MVVM plugin and jQueryUI as MVC widget
@@ -39,7 +39,7 @@
*
* ModelView.js
* @version: 0.62
-* @built on 2015-07-11 23:53:22
+* @built on 2015-07-12 14:09:15
*
* A simple/extendable MV* (MVVM) framework
* optionaly integrates into both jQuery as MVVM plugin and jQueryUI as MVC widget
@@ -5805,12 +5805,13 @@ The declarative view binding format is like:
each |
view.do_each |
-
- ```html
-
-
-
- ```
+
+
+<ul data-bind='{"each":"a.model.collection.key"}'></ul>
+<!-- is shorthand for: -->
+<ul data-bind='{"change":{"action":"each","key":"a.model.collection.key"}}'></ul>
+ |
update element each child node depending on model collection key (TODO) |
@@ -5818,24 +5819,25 @@ The declarative view binding format is like:
prop |
view.do_prop |
-
- ```html
-
-
-
-
-
-
+
+<div data-bind='{"value":"a.model.key"}'></div>
+<!-- is shorthand for: -->
+<div data-bind='{"change":{"action":"prop","prop":{"value":"a.model.key"}}}'></div>
-
-
-
+<div data-bind='{"checked":"a.model.key"}'></div>
+<!-- is shorthand for: -->
+<div data-bind='{"change":{"action":"prop","prop":{"checked":"a.model.key"}}}'></div>
+
+<div data-bind='{"disabled":"a.model.key"}'></div>
+<!-- is shorthand for: -->
+<div data-bind='{"change":{"action":"prop","prop":{"disabled":"a.model.key"}}}'></div>
+
+<div data-bind='{"options":"a.model.key"}'></div>
+<!-- is shorthand for: -->
+<div data-bind='{"change":{"action":"prop","prop":{"options":"a.model.key"}}}'></div>
+ |
set element properties based on model data keys |
@@ -5843,14 +5845,15 @@ The declarative view binding format is like:
html / text |
view.do_html |
-
- ```html
-
-
-
-
-
- ```
+
+
+<div data-bind='{"html":"a.model.key"}'></div>
+<div data-bind='{"text":"a.model.key"}'></div>
+<!-- is shorthand for: -->
+<div data-bind='{"change":{"action":"html","key":"a.model.key"}}'></div>
+<div data-bind='{"change":{"action":"text","key":"a.model.key"}}'></div>
+ |
set element html/text property based on model data key |
@@ -5858,12 +5861,13 @@ The declarative view binding format is like:
css |
view.do_css |
-
- ```html
-
-
-
- ```
+
+
+<div data-bind='{"css":{"color":"a.model.key","background":"another.model.key"}}'></div>
+<!-- is shorthand for: -->
+<div data-bind='{"change":{"action":"css","css":{"color":"a.model.key","background":"another.model.key"}}}'></div>
+ |
set element css style(s) based on model data key(s) |
@@ -5871,12 +5875,13 @@ The declarative view binding format is like:
show |
view.do_show |
-
- ```html
-
-
-
- ```
+
+
+<div data-bind='{"show":"a.model.key"}'></div>
+<!-- is shorthand for: -->
+<div data-bind='{"change":{"action":"show","key":"a.model.key"}}'></div>
+ |
show/hide element based on model data key (interpreted as *truthy value*) |
@@ -5884,12 +5889,13 @@ The declarative view binding format is like:
hide |
view.do_hide |
-
- ```html
-
-
-
- ```
+
+
+<div data-bind='{"hide":"a.model.key"}'></div>
+<!-- is shorthand for: -->
+<div data-bind='{"change":{"action":"hide","key":"a.model.key"}}'></div>
+ |
hide/show element based on model data key (interpreted as *truthy value*) |
@@ -5897,10 +5903,11 @@ The declarative view binding format is like:
tpl |
view.do_tpl |
-
- ```html
-
- ```
+
+
+<div data-bind='{"click":{"action":"tpl","tpl":"tplID","key":"a.model.key"}}'></div>
+ |
element render a template based on model data key |
@@ -5908,12 +5915,13 @@ The declarative view binding format is like:
set |
view.do_set |
-
- ```html
-
-
-
- ```
+
+
+<div data-bind='{"set":{"key":"akey","value":"aval"}}'></div>
+<!-- is shorthand for: -->
+<div data-bind='{"click":{"action":"set","key":"a.model.key","value":"aval"}}'></div>
+ |
set/update model data key with given value on a UI event (default "click") |
@@ -5921,11 +5929,12 @@ The declarative view binding format is like:
bind |
view.do_bind |
-
- ```html
-
-
- ```
+
+
+<input name="model[a][model][key]" />
+<select name="model[another][model][key]"></select>
+ |
input element default two-way autobind action (automaticaly update value on input elements based on changed model data key or vice-versa) |
diff --git a/build/modelview.min.js b/build/modelview.min.js
index 59ffc4f..da8ebe4 100644
--- a/build/modelview.min.js
+++ b/build/modelview.min.js
@@ -2,7 +2,7 @@
*
* ModelView.js
* @version: 0.62
-* @built on 2015-07-11 23:53:22
+* @built on 2015-07-12 14:09:15
*
* A simple/extendable MV* (MVVM) framework
* optionaly integrates into both jQuery as MVVM plugin and jQueryUI as MVC widget
diff --git a/manual.md b/manual.md
index 0df4498..5e53cab 100644
--- a/manual.md
+++ b/manual.md
@@ -840,12 +840,13 @@ The declarative view binding format is like:
each |
view.do_each |
-
- ```html
-
-
-
- ```
+
+
+<ul data-bind='{"each":"a.model.collection.key"}'></ul>
+<!-- is shorthand for: -->
+<ul data-bind='{"change":{"action":"each","key":"a.model.collection.key"}}'></ul>
+ |
update element each child node depending on model collection key (TODO) |
@@ -853,24 +854,25 @@ The declarative view binding format is like:
prop |
view.do_prop |
-
- ```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ```
+
+
+<div data-bind='{"value":"a.model.key"}'></div>
+<!-- is shorthand for: -->
+<div data-bind='{"change":{"action":"prop","prop":{"value":"a.model.key"}}}'></div>
+
+<div data-bind='{"checked":"a.model.key"}'></div>
+<!-- is shorthand for: -->
+<div data-bind='{"change":{"action":"prop","prop":{"checked":"a.model.key"}}}'></div>
+
+<div data-bind='{"disabled":"a.model.key"}'></div>
+<!-- is shorthand for: -->
+<div data-bind='{"change":{"action":"prop","prop":{"disabled":"a.model.key"}}}'></div>
+
+<div data-bind='{"options":"a.model.key"}'></div>
+<!-- is shorthand for: -->
+<div data-bind='{"change":{"action":"prop","prop":{"options":"a.model.key"}}}'></div>
+ |
set element properties based on model data keys |
@@ -878,14 +880,15 @@ The declarative view binding format is like:
html / text |
view.do_html |
-
- ```html
-
-
-
-
-
- ```
+
+
+<div data-bind='{"html":"a.model.key"}'></div>
+<div data-bind='{"text":"a.model.key"}'></div>
+<!-- is shorthand for: -->
+<div data-bind='{"change":{"action":"html","key":"a.model.key"}}'></div>
+<div data-bind='{"change":{"action":"text","key":"a.model.key"}}'></div>
+ |
set element html/text property based on model data key |
@@ -893,12 +896,13 @@ The declarative view binding format is like:
css |
view.do_css |
-
- ```html
-
-
-
- ```
+
+
+<div data-bind='{"css":{"color":"a.model.key","background":"another.model.key"}}'></div>
+<!-- is shorthand for: -->
+<div data-bind='{"change":{"action":"css","css":{"color":"a.model.key","background":"another.model.key"}}}'></div>
+ |
set element css style(s) based on model data key(s) |
@@ -906,12 +910,13 @@ The declarative view binding format is like:
show |
view.do_show |
-
- ```html
-
-
-
- ```
+
+
+<div data-bind='{"show":"a.model.key"}'></div>
+<!-- is shorthand for: -->
+<div data-bind='{"change":{"action":"show","key":"a.model.key"}}'></div>
+ |
show/hide element based on model data key (interpreted as *truthy value*) |
@@ -919,12 +924,13 @@ The declarative view binding format is like:
hide |
view.do_hide |
-
- ```html
-
-
-
- ```
+
+
+<div data-bind='{"hide":"a.model.key"}'></div>
+<!-- is shorthand for: -->
+<div data-bind='{"change":{"action":"hide","key":"a.model.key"}}'></div>
+ |
hide/show element based on model data key (interpreted as *truthy value*) |
@@ -932,10 +938,11 @@ The declarative view binding format is like:
tpl |
view.do_tpl |
-
- ```html
-
- ```
+
+
+<div data-bind='{"click":{"action":"tpl","tpl":"tplID","key":"a.model.key"}}'></div>
+ |
element render a template based on model data key |
@@ -943,12 +950,13 @@ The declarative view binding format is like:
set |
view.do_set |
-
- ```html
-
-
-
- ```
+
+
+<div data-bind='{"set":{"key":"akey","value":"aval"}}'></div>
+<!-- is shorthand for: -->
+<div data-bind='{"click":{"action":"set","key":"a.model.key","value":"aval"}}'></div>
+ |
set/update model data key with given value on a UI event (default "click") |
@@ -956,11 +964,12 @@ The declarative view binding format is like:
bind |
view.do_bind |
-
- ```html
-
-
- ```
+
+
+<input name="model[a][model][key]" />
+<select name="model[another][model][key]"></select>
+ |
input element default two-way autobind action (automaticaly update value on input elements based on changed model data key or vice-versa) |
diff --git a/src/view.js b/src/view.js
index 4f9cb3c..2847e44 100644
--- a/src/view.js
+++ b/src/view.js
@@ -1335,12 +1335,13 @@ The declarative view binding format is like:
each |
view.do_each |
-
- ```html
-
-
-
- ```
+
+
+<ul data-bind='{"each":"a.model.collection.key"}'></ul>
+<!-- is shorthand for: -->
+<ul data-bind='{"change":{"action":"each","key":"a.model.collection.key"}}'></ul>
+ |
update element each child node depending on model collection key (TODO) |
@@ -1348,24 +1349,25 @@ The declarative view binding format is like:
prop |
view.do_prop |
-
- ```html
-
-
-
-
-
-
+
+<div data-bind='{"value":"a.model.key"}'></div>
+<!-- is shorthand for: -->
+<div data-bind='{"change":{"action":"prop","prop":{"value":"a.model.key"}}}'></div>
-
-
-
+<div data-bind='{"checked":"a.model.key"}'></div>
+<!-- is shorthand for: -->
+<div data-bind='{"change":{"action":"prop","prop":{"checked":"a.model.key"}}}'></div>
+
+<div data-bind='{"disabled":"a.model.key"}'></div>
+<!-- is shorthand for: -->
+<div data-bind='{"change":{"action":"prop","prop":{"disabled":"a.model.key"}}}'></div>
+
+<div data-bind='{"options":"a.model.key"}'></div>
+<!-- is shorthand for: -->
+<div data-bind='{"change":{"action":"prop","prop":{"options":"a.model.key"}}}'></div>
+ |
set element properties based on model data keys |
@@ -1373,14 +1375,15 @@ The declarative view binding format is like:
html / text |
view.do_html |
-
- ```html
-
-
-
-
-
- ```
+
+
+<div data-bind='{"html":"a.model.key"}'></div>
+<div data-bind='{"text":"a.model.key"}'></div>
+<!-- is shorthand for: -->
+<div data-bind='{"change":{"action":"html","key":"a.model.key"}}'></div>
+<div data-bind='{"change":{"action":"text","key":"a.model.key"}}'></div>
+ |
set element html/text property based on model data key |
@@ -1388,12 +1391,13 @@ The declarative view binding format is like:
css |
view.do_css |
-
- ```html
-
-
-
- ```
+
+
+<div data-bind='{"css":{"color":"a.model.key","background":"another.model.key"}}'></div>
+<!-- is shorthand for: -->
+<div data-bind='{"change":{"action":"css","css":{"color":"a.model.key","background":"another.model.key"}}}'></div>
+ |
set element css style(s) based on model data key(s) |
@@ -1401,12 +1405,13 @@ The declarative view binding format is like:
show |
view.do_show |
-
- ```html
-
-
-
- ```
+
+
+<div data-bind='{"show":"a.model.key"}'></div>
+<!-- is shorthand for: -->
+<div data-bind='{"change":{"action":"show","key":"a.model.key"}}'></div>
+ |
show/hide element based on model data key (interpreted as *truthy value*) |
@@ -1414,12 +1419,13 @@ The declarative view binding format is like:
hide |
view.do_hide |
-
- ```html
-
-
-
- ```
+
+
+<div data-bind='{"hide":"a.model.key"}'></div>
+<!-- is shorthand for: -->
+<div data-bind='{"change":{"action":"hide","key":"a.model.key"}}'></div>
+ |
hide/show element based on model data key (interpreted as *truthy value*) |
@@ -1427,10 +1433,11 @@ The declarative view binding format is like:
tpl |
view.do_tpl |
-
- ```html
-
- ```
+
+
+<div data-bind='{"click":{"action":"tpl","tpl":"tplID","key":"a.model.key"}}'></div>
+ |
element render a template based on model data key |
@@ -1438,12 +1445,13 @@ The declarative view binding format is like:
set |
view.do_set |
-
- ```html
-
-
-
- ```
+
+
+<div data-bind='{"set":{"key":"akey","value":"aval"}}'></div>
+<!-- is shorthand for: -->
+<div data-bind='{"click":{"action":"set","key":"a.model.key","value":"aval"}}'></div>
+ |
set/update model data key with given value on a UI event (default "click") |
@@ -1451,11 +1459,12 @@ The declarative view binding format is like:
bind |
view.do_bind |
-
- ```html
-
-
- ```
+
+
+<input name="model[a][model][key]" />
+<select name="model[another][model][key]"></select>
+ |
input element default two-way autobind action (automaticaly update value on input elements based on changed model data key or vice-versa) |