Skip to content
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

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 42 additions & 11 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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:

Expand Down Expand Up @@ -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
Copy link
Contributor

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' :)

Copy link
Contributor Author

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 :-)

});
});
```

Outputs:

```html
<div class="user-">
<p>
My schedule is very full. <span class="isAvailable-" style="display:none">I just have a few openings</span>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this need style="display:none;"? I feel like class="isAvailable-" should do it for you.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is the output it's what enddash renders.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh, right.

</p>
</div>
```

Scoping
=======

Expand Down