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.

Sign up for GitHub

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

expand conditionals into two sections #132

Closed
wants to merge 2 commits into from
Closed

expand conditionals into two sections #132

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a0419d3
expand conditionals into two sections
Nov 11, 2013
34c418d
incorporate devon`s changes
Nov 11, 2013
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
100 changes: 48 additions & 52 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,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 @@ -244,8 +246,8 @@ var characters = new Backbone.Collection([

## Polymorphic attributes

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.
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.

In this case, `role` is behaving as a polymorphic attribute.

Expand Down Expand Up @@ -330,34 +332,63 @@ 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- #{availabile ? openings : unavailable}">
Copy link
Contributor

Choose a reason for hiding this comment

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

typo

</div>
```

or just

Copy link
Contributor

Choose a reason for hiding this comment

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

Instead of 'or just'.

'To add the a tag attribute only if the object attribute is true (or false) just
leave out the second clause.'

Or even cut this out. It seems like nice but extra syntax that a user might be able to figure out. What do you think?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

actually, can't do it if false, maybe with colon but without first condition? dunno...I thought it was funny mentioning it but not showing an example, but I could go either way I guess

Copy link
Contributor

Choose a reason for hiding this comment

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

Yeah actually do not mention that, though one could always do ? "" : cake to get the only when false behavior.

```html
<div class="user- #{availabile ? 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.

Copy link
Contributor

Choose a reason for hiding this comment

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

Hmmm I was confused when first reading this. It seems pretty explanatory now that I read it. However, that could easily because I have read it three times at this point :D

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Which part, the 'full ternary' phrasing? Open to edits :-)

Copy link
Contributor

Choose a reason for hiding this comment

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

A little :). Perhaps we can actually do away with this part? and then edit the 'or just' clause. (my other comment!)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yeah, dunno, feel free to edit and push to this branch... I'm poking at the custom template thing since it seems like if easily workable would be a big win, but can stop if you think it's silly...

## Visibility Conditionals

EndDash has truthiness controls for conditional visibility. EndDash class elements 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']
alias: 'IronMan',
available: false
});
});
```

Outputs:

```html
<div class="user-">
<p>
My schedule is very full.
</p>
</div>
```

Scoping
=======

Expand Down Expand Up @@ -428,7 +459,7 @@ Normal UNIX path shorthands apply: `..` to move back up a scope level, `/` to se
```

'`class='user-'` is actually syntatic sugar for `data-scope='./user'`. Using `data-scope` like this,
at the current scope, is mainly useful for accessing a property of a nested model in the same DOM
at the current scope, is mainly useful for accessing a property of a nested model in the same DOM
element that you change the scope.

Presenters
Expand Down Expand Up @@ -524,50 +555,15 @@ Partials
========

Small, reusable components of HTML can be templated in EndDash as partials.
One common use for partials is iterating through a collection.


```javascript
var person1 = new Backbone.Model({firstName: 'Tony', lastName: 'Stark', alias: 'IronMan'});
var person2 = new Backbone.Model({firstName: 'James', lastName: 'Rhodes', alias: 'WarMachine'});
var person3 = new Backbone.Model({firstName: 'Pepper', lastName: 'Potts', alias: 'none' });

var people = new Backbone.Collection([person1, person2, person3]);
```

Iterate through the collection using data-each.

The data-replace attribute tells EndDash to substitute the partial's root element for this element.
Without data-replace, EndDash will embed the root element beneath the partial's element and leave it.
To use a partial, add `src='templateName'` as an attribute to an element with no children.

```html
<h2>Characters</h2>
<h3>Cast of characters include:</h3>
<table id="members_list">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Alias</th>
</tr>
</thead>
<tbody class="people-">
<div data-each>
<div src='./partials/person' data-replace></div>
</div>
</tbody>
</table>
<div src='myPartial' data-replace></div>
```
The `data-replace` attribute tells EndDash to substitute the partial's root element for this element.
Without `data-replace`, EndDash will embed the root element beneath the partial's element and leave it.

and in your partials folder another EndDash template such as:

```html
<tr class="userRow">
<td class="firstName-"></td>
<td class="lastName-"></td>
<td class="alias-"></td>
</tr>
```
Load the partial you are referencing into EndDash before binding to the template.


Debugger
Expand Down