|
@ -3,6 +3,12 @@ tag view-usage |
|
|
"This integration provides " |
|
|
"This integration provides " |
|
|
<b> 3 |
|
|
<b> 3 |
|
|
" components:" |
|
|
" components:" |
|
|
|
|
|
<b> "ref" |
|
|
|
|
|
", " |
|
|
|
|
|
<b> "toggle" |
|
|
|
|
|
" and " |
|
|
|
|
|
<b> "router" |
|
|
|
|
|
"." |
|
|
<br> |
|
|
<br> |
|
|
<br> |
|
|
<br> |
|
|
<.bordered> "<pro-ref>" |
|
|
<.bordered> "<pro-ref>" |
|
@ -98,7 +104,7 @@ tag view-usage |
|
|
""" |
|
|
""" |
|
|
<br> |
|
|
<br> |
|
|
"A bit more complex example:" |
|
|
"A bit more complex example:" |
|
|
<imba-code url="/{R.param('subview')}"> |
|
|
<imba-code url="/{R.params.subview || ''}"> |
|
|
""" |
|
|
""" |
|
|
{<c-tag-def> 'my-app'} |
|
|
{<c-tag-def> 'my-app'} |
|
|
{<c-tag> 'self'} |
|
|
{<c-tag> 'self'} |
|
@ -123,7 +129,127 @@ tag view-usage |
|
|
<c-tag> "pro-router{<c-el> ' view'}{<c-op> '='}{<c-c> 'R'}{<c-op> '.'}param{<.c-br> '('}{<c-str> 'subview'}{<.c-br> ')'}" |
|
|
<c-tag> "pro-router{<c-el> ' view'}{<c-op> '='}{<c-c> 'R'}{<c-op> '.'}param{<.c-br> '('}{<c-str> 'subview'}{<.c-br> ')'}" |
|
|
|
|
|
|
|
|
<br> |
|
|
<br> |
|
|
|
|
|
<h2.gradient> "Pro-router tips" |
|
|
|
|
|
"Further reading is not about functionalities provided by this package itself but the ones you will be using straight from pro-router." |
|
|
|
|
|
<br> |
|
|
|
|
|
<br> |
|
|
|
|
|
<.example> |
|
|
|
|
|
<code-inline> "{<c-c> 'R'}{<c-op> '.'}param{<.c-br> '('}{<c-str> 'key'}{<.c-br> ')'}" |
|
|
|
|
|
<p> |
|
|
|
|
|
"Use it to receive param value for given { <i> 'key' }." |
|
|
|
|
|
<br> |
|
|
|
|
|
"Value will be automatically processed with key { <b> 'getter' } if provided." |
|
|
|
|
|
<br> |
|
|
|
|
|
"It's awesome because you immidietaly work on a real object." |
|
|
|
|
|
<br> |
|
|
|
|
|
<pro-tip> |
|
|
|
|
|
<.example> |
|
|
|
|
|
<code-inline> "{<c-c> 'R'}{<c-op> '.'}params{<c-op> '.'}key" |
|
|
|
|
|
<p> "You can ommit getter by going straight for the parameter." |
|
|
|
|
|
<br> |
|
|
|
|
|
<br> |
|
|
|
|
|
<.example> |
|
|
|
|
|
<code-inline> "{<c-c> 'R'}{<c-op> '.'}write{<.c-br> '('}{<c-str> 'key'}{<c-op> ','} value{<.c-br> ')'}" |
|
|
|
|
|
<p> |
|
|
|
|
|
"Use it to store the { <i> 'value' } under given param { <i> 'key' }." |
|
|
|
|
|
<br> |
|
|
|
|
|
"Value will be automatically processed with key { <b> 'setter' } if provided." |
|
|
<br> |
|
|
<br> |
|
|
|
|
|
"It's awesome because you can easily store anything in a nice format this way." |
|
|
|
|
|
<pro-tip> |
|
|
|
|
|
"Writing doesn't change browser history. This way you can bind directly user input to url." |
|
|
|
|
|
<imba-code url="/{("user-input/" + R.params['user-input'] if R.params['user-input']) || ''}"> |
|
|
|
|
|
<c-tag> "input{<c-c> '$v'} type{<c-op> '='}{<c-str> 'text'} value{<c-op> '='}{<c-c> 'R'}{<c-op> '.'}param{<.c-br> '('}{<c-str> 'user-input'}{<.c-br> ')'} {<c-op> '@keyup='}{<c-c> 'R'}{<c-op> '.'}write{<.c-br> '('}{<c-str> 'user-input'}{<c-op> ', '}{<c-c> '$v'}{<c-op> '.'}value{<.c-br> ')'}" |
|
|
|
|
|
<div[d:vcc h:100px] slot="live"> |
|
|
|
|
|
<input$v type='text' value=R.param('user-input') @keyup=R.write('user-input', $v.value)> |
|
|
|
|
|
<h3.gradient> "Using getters and setters" |
|
|
|
|
|
"This is very simple yet powerful feature which can fullfil many different functions." |
|
|
|
|
|
<br> |
|
|
|
|
|
<br> |
|
|
|
|
|
<b> "Format a nice url:" |
|
|
|
|
|
<imba-code url="/{("title/" + R.params.title if R.params.title) || ''}"> |
|
|
|
|
|
"{<c-c> 'R'}{<c-op> '.'}setters{<c-op> '.'}title {<c-op> '='} {<c-fl> 'do'} {<c-op> '|'}{<c-c> 'v' }{<c-op> '|'} v{<c-op> '.'}replaceAll{<.c-br> '('}{<c-str> ' '}{<c-op> ', '}{<c-str> '-'}{<.c-br> ')'}" |
|
|
|
|
|
<br> |
|
|
|
|
|
"{<c-c> 'R'}{<c-op> '.'}getters{<c-op> '.'}title {<c-op> '='} {<c-fl> 'do'} {<c-op> '|'}{<c-c> 'v' }{<c-op> '|'} v{<c-op> '.'}replaceAll{<.c-br> '('}{<c-str> '-'}{<c-op> ', '}{<c-str> ' '}{<.c-br> ')'}" |
|
|
|
|
|
|
|
|
|
|
|
<div[d:vcc h:100px] slot="live"> |
|
|
|
|
|
<label> "Title: {R.param('title')}" |
|
|
|
|
|
<input$v2 type='text' value=R.param('title') @keyup=R.write('title', $v2.value)> |
|
|
|
|
|
<br> |
|
|
|
|
|
<br> |
|
|
|
|
|
<b> "Set default value:" |
|
|
|
|
|
<imba-code url="/{("name/" + R.params.name if R.params.name) || ''}"> |
|
|
|
|
|
"{<c-c> 'R'}{<c-op> '.'}setters{<c-op> '.'}name {<c-op> '='} {<c-fl> 'do'} {<c-op> '|'}{<c-c> 'v' }{<c-op> '|'} v {<c-fl> 'if '}{<c-str> 'Johny'}{<c-op> '!='} v" |
|
|
|
|
|
<br> |
|
|
|
|
|
"{<c-c> 'R'}{<c-op> '.'}getters{<c-op> '.'}name {<c-op> '='} {<c-fl> 'do'} {<c-op> '|'}{<c-c> 'v' }{<c-op> '|'} v {<c-op> '||'} {<c-str> 'Johny'}" |
|
|
|
|
|
|
|
|
|
|
|
<div[d:vcc h:100px] slot="live"> |
|
|
|
|
|
<label> "Hello {R.param('name')}!" |
|
|
|
|
|
<input$v3 type='text' value=(R.params.name ? R.param('name') : '') @keyup=R.write('name', $v3.value)> |
|
|
|
|
|
<br> |
|
|
|
|
|
<br> |
|
|
|
|
|
<b> "Give you right away a proper object:" |
|
|
|
|
|
<imba-code url="/{("number/" + R.params.number if R.params.number) || ''}{("/cucumber/" + R.params.cucumber if R.params.cucumber) || ''}"> |
|
|
|
|
|
"{<c-c> 'R'}{<c-op> '.'}getters{<c-op> '.'}number {<c-op> '='} {<c-fl> 'do'} {<c-op> '|'}{<c-c> 'v' }{<c-op> '|'} {<c-c> 'Number'}{<.c-br> '('}v{<.c-br> ')'}" |
|
|
|
|
|
|
|
|
|
|
|
<div[d:vcc h:150px] slot="live"> |
|
|
|
|
|
<[d:inline-block]> |
|
|
|
|
|
<.button@click=(R.write 'number', R.param('number') - 1)> "-" |
|
|
|
|
|
" With getter: {R.param('number')} " |
|
|
|
|
|
<.button@click=(R.write 'number', R.param('number') + 1)> "+" |
|
|
|
|
|
<br> |
|
|
|
|
|
<[d:inlne-block]> |
|
|
|
|
|
<.button@click=(R.write 'cucumber', R.param('cucumber') - 1)> "-" |
|
|
|
|
|
" Without getter: {R.param('cucumber')} " |
|
|
|
|
|
<.button@click=(R.write 'cucumber', R.param('cucumber') + 1)> "+" |
|
|
|
|
|
<br> |
|
|
|
|
|
<br> |
|
|
|
|
|
<b> "Validates value:" |
|
|
|
|
|
<imba-code url="/{("one2four/" + R.params.one2four if R.params.one2four) || ''}"> |
|
|
|
|
|
""" |
|
|
|
|
|
{<c-tag-def> "valid{<.c-br> '('}{<c-el> 'v'}{<.c-br> ')'}"} |
|
|
|
|
|
{<c-c> 0} {<c-op> '<'} v {<c-op> 'and'} v {<c-op> '<'} {<c-c> 4} |
|
|
|
|
|
|
|
|
|
|
|
{<c-c> 'R'}{<c-op> '.'}setters{<c-op> '.'}one2four {<c-op> '='} {<c-fl> 'do'} {<c-op> '|'}v{<c-op> '|'} valid{<.c-br> '('}v{<.c-br> ')'} {<c-fl> '?'} v {<c-fl> ':'} {<c-c> 'R'}{<c-op> '.'}params{<c-op> '.'}one2four |
|
|
|
|
|
{<c-c> 'R'}{<c-op> '.'}getters{<c-op> '.'}one2four {<c-op> '='} {<c-fl> 'do'} {<c-op> '|'}v{<c-op> '|'} |
|
|
|
|
|
{<c-fl> 'if'} v |
|
|
|
|
|
{<c-let> 'number'} {<c-op> '='} {<c-c> 'Number'}{<.c-br> '('}v{<.c-br> ')'} |
|
|
|
|
|
{<c-fl> 'return'} number {<c-fl> 'if'} valid{<.c-br> '('}number{<.c-br> ')'} |
|
|
|
|
|
{<c-c> 1} |
|
|
|
|
|
""" |
|
|
|
|
|
|
|
|
|
|
|
<div[d:vcc h:100px] slot="live"> |
|
|
|
|
|
<[d:inline-block]> |
|
|
|
|
|
<.button@click=(R.write 'one2four', R.param('one2four') - 1)> "-" |
|
|
|
|
|
<b> " {R.param('one2four')} " |
|
|
|
|
|
<.button@click=(R.write 'one2four', R.param('one2four') + 1)> "+" |
|
|
|
|
|
|
|
|
|
|
|
<br> |
|
|
|
|
|
<a.button href='#/usage/'> "Reset playground" |
|
|
|
|
|
<br> |
|
|
|
|
|
<br> |
|
|
|
|
|
<br> |
|
|
|
|
|
"Complementary read: " |
|
|
|
|
|
<a href="http://router.maniak.pro/#/docs"> 'router.maniak.pro/#/docs' |
|
|
|
|
|
|
|
|
|
|
|
R.setters.title = do |v| v.replaceAll(' ', '-') |
|
|
|
|
|
R.getters.title = do |v| v.replaceAll('-', ' ') |
|
|
|
|
|
R.setters.name = do |v| v if "Johny" != v |
|
|
|
|
|
R.getters.name = do |v| v || "Johny" |
|
|
|
|
|
R.getters.number = do |v| Number(v) |
|
|
|
|
|
|
|
|
|
|
|
def valid(v) |
|
|
|
|
|
0 < v and v < 4 |
|
|
|
|
|
|
|
|
|
|
|
R.setters.one2four = do |v| valid(v) ? v : R.params.one2four |
|
|
|
|
|
R.getters.one2four = do |v| |
|
|
|
|
|
if v |
|
|
|
|
|
let number = Number(v) |
|
|
|
|
|
return number if valid(number) |
|
|
|
|
|
1 |
|
|
|
|
|
css .example |
|
|
|
|
|
d:htl |
|
|
|
|
|
> mr: 10px |
|
|
|
|
|
|
|
|
tag example-menu |
|
|
tag example-menu |
|
|
<self> |
|
|
<self> |
|
|