-
Notifications
You must be signed in to change notification settings - Fork 15
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Ternary vs conditional sections rebase #147
base: master
Are you sure you want to change the base?
Changes from all commits
b528b72
31dda09
fb49a28
7093bd6
05ba18b
550d131
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -105,6 +105,8 @@ Documentation | |
* [Collection Attributes](#collection-attributes) | ||
|
||
[Conditionals](#conditionals) | ||
* [Ternary](#ternary) | ||
* [Visibility Conditionals](#visibility-conditionals) | ||
|
||
[Scoping](#scoping) | ||
* [What is scoping?](#what-is-scoping) | ||
|
@@ -247,7 +249,8 @@ Note that the elements iterated over must have one root. | |
|
||
## Polymorphic attributes | ||
|
||
If your objects have an enum field, you can branch based on its value. | ||
If your objects have an enum (or Enumerated type) field, you can specify handling based on | ||
which type it is. This is best explained with an example. | ||
|
||
For example, `role` behaves as a polymorphic attribute: | ||
|
||
|
@@ -346,33 +349,61 @@ different than length), as in the example below: | |
Conditionals | ||
============ | ||
|
||
## Ternary | ||
|
||
A ternary operator is available for presence handling via 'truthiness' for attributes | ||
that may be present, with or without a false condition: | ||
|
||
```html | ||
<div class="user- #{availability ? available : unavailable}"> | ||
<div class="user- #{available ? openings : unavailable}"> | ||
</div> | ||
``` | ||
|
||
or just | ||
|
||
```html | ||
<div class="user- #{available ? openings }"> | ||
</div> | ||
``` | ||
|
||
The full ternary with false condition will add the `available` class when availability is | ||
truth, and the `unavailable` class when falsy. The second example will only add the | ||
`available` class when availability is truthy. | ||
|
||
## Visibility Conditionals | ||
|
||
EndDash has truthiness controls for conditional visibility. EndDash class names that begin with `is` or `has`, | ||
(as well as their boolean opposites `isNot` and `hasNot`) will hide (via a `display:none` style attribute) | ||
the element when its named attribute, with its boolean evaluation prefix, is falsy ('isNotAvailable-' will return | ||
true if `!!model.get('available') === false`). | ||
|
||
```html | ||
<div class="user-"> | ||
<p> | ||
My schedule is very full. <span class="isAvailable-">I just have a few openings</span> | ||
</p> | ||
</div> | ||
``` | ||
|
||
The same truthiness controls conditional visibility EndDash class elements that start with `is` or `has`, | ||
and their boolean opposites `isNot` and `hasNot`, as above with `isAvailable-`. EndDash will hide (via a | ||
`display:none` style attribute) any such element when its named attribute is falsy (or hide when truthy in | ||
the case of `isNot` and `hasNot`.) | ||
|
||
```js | ||
template.bind({ | ||
user: new Backbone.Model({ | ||
firstName: 'Tony', | ||
lastName: 'Stark', | ||
alias: 'IronMan' | ||
availability: ['10am', '2pm'] | ||
name: 'Tony Stark', | ||
available: false | ||
}); | ||
}); | ||
``` | ||
|
||
Outputs: | ||
|
||
```html | ||
<div class="user-"> | ||
<p> | ||
My schedule is very full. <span class="isAvailable-" style="display:none">I just have a few openings</span> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Does this need There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. this is the output it's what enddash renders. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Oh, right. |
||
</p> | ||
</div> | ||
``` | ||
|
||
Scoping | ||
======= | ||
|
||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is 'alias' used at all? :) How about firstName & lastName, can we just make it name: 'Tony Stark' :)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
can tweak that in another PR I think, or edit it here yourself if you really want, I don't care too much :-)