Permalink
Browse files

feat(condition and Component.if): Added solution for conditional temp…

…lates
  • Loading branch information...
calebdwilliams committed Aug 22, 2018
1 parent 001b42d commit 511d080ef144cd90c5bbd27ce4178d94d7abe7da
@@ -100,6 +100,10 @@ class HelloWorld extends Component {
constructor() {
super();
this.state = {
who: this.getAttribute('who'),
now: new Date().toLocaleString()
};
this.interval = setInterval(this.updateTime.bind(this), 100);
}
@@ -177,12 +181,21 @@ Loops are created using the built-in `Array` prototype methods and the use of th

The fragment's `this` methods will still be referenced to the containing component.

## If directive
## Conditional templates

To show/hide elements based on some condition, use the `<t-if>` element:
To show/hide elements based on some condition, use the condition function. When used in a `Component`, you can use the element's built-in `if` method:

```html
<t-if [condition]="${this.showTodos}">
<!-- To do repeater -->
</t-if>
${this.if(this.showTodos)`
<ul>
${this.todos = todo => this.fragment(todo)`
<li>
<label>
<input type="checkbox" (change)="${this.done}">
${todo.title}
</label>
</li>
`}
</ul>
`}
```
@@ -20,24 +20,24 @@ <h1>
</h1>
<div class='clearfix'>
<div class='fl pad1y space-right2'>
<span class="strong">81.7% </span>
<span class="strong">83.74% </span>
<span class="quiet">Statements</span>
<span class='fraction'>308/377</span>
<span class='fraction'>309/369</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">69.52% </span>
<span class="strong">69.86% </span>
<span class="quiet">Branches</span>
<span class='fraction'>146/210</span>
<span class='fraction'>146/209</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">84.09% </span>
<span class="strong">88.1% </span>
<span class="quiet">Functions</span>
<span class='fraction'>37/44</span>
<span class='fraction'>37/42</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">83.9% </span>
<span class="strong">85.88% </span>
<span class="quiet">Lines</span>
<span class='fraction'>297/354</span>
<span class='fraction'>298/347</span>
</div>
</div>
</div>
@@ -60,15 +60,15 @@ <h1>
</thead>
<tbody><tr>
<td class="file high" data-value="src/"><a href="src/index.html">src/</a></td>
<td data-value="81.7" class="pic high"><div class="chart"><div class="cover-fill" style="width: 81%;"></div><div class="cover-empty" style="width:19%;"></div></div></td>
<td data-value="81.7" class="pct high">81.7%</td>
<td data-value="377" class="abs high">308/377</td>
<td data-value="69.52" class="pct medium">69.52%</td>
<td data-value="210" class="abs medium">146/210</td>
<td data-value="84.09" class="pct high">84.09%</td>
<td data-value="44" class="abs high">37/44</td>
<td data-value="83.9" class="pct high">83.9%</td>
<td data-value="354" class="abs high">297/354</td>
<td data-value="83.74" class="pic high"><div class="chart"><div class="cover-fill" style="width: 83%;"></div><div class="cover-empty" style="width:17%;"></div></div></td>
<td data-value="83.74" class="pct high">83.74%</td>
<td data-value="369" class="abs high">309/369</td>
<td data-value="69.86" class="pct medium">69.86%</td>
<td data-value="209" class="abs medium">146/209</td>
<td data-value="88.1" class="pct high">88.1%</td>
<td data-value="42" class="abs high">37/42</td>
<td data-value="85.88" class="pct high">85.88%</td>
<td data-value="347" class="abs high">298/347</td>
</tr>

</tbody>
@@ -77,7 +77,7 @@ <h1>
</div><!-- /wrapper -->
<div class='footer quiet pad2 space-top1 center small'>
Code coverage
generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at Sat Aug 18 2018 15:11:58 GMT-0500 (CDT)
generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at Tue Aug 21 2018 21:31:45 GMT-0500 (CDT)
</div>
</div>
<script src="prettify.js"></script>
@@ -20,24 +20,24 @@ <h1>
</h1>
<div class='clearfix'>
<div class='fl pad1y space-right2'>
<span class="strong">81.7% </span>
<span class="strong">83.74% </span>
<span class="quiet">Statements</span>
<span class='fraction'>308/377</span>
<span class='fraction'>309/369</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">69.52% </span>
<span class="strong">69.86% </span>
<span class="quiet">Branches</span>
<span class='fraction'>146/210</span>
<span class='fraction'>146/209</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">84.09% </span>
<span class="strong">88.1% </span>
<span class="quiet">Functions</span>
<span class='fraction'>37/44</span>
<span class='fraction'>37/42</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">83.9% </span>
<span class="strong">85.88% </span>
<span class="quiet">Lines</span>
<span class='fraction'>297/354</span>
<span class='fraction'>298/347</span>
</div>
</div>
</div>
@@ -60,15 +60,15 @@ <h1>
</thead>
<tbody><tr>
<td class="file high" data-value="templiteral.js"><a href="templiteral.js.html">templiteral.js</a></td>
<td data-value="81.7" class="pic high"><div class="chart"><div class="cover-fill" style="width: 81%;"></div><div class="cover-empty" style="width:19%;"></div></div></td>
<td data-value="81.7" class="pct high">81.7%</td>
<td data-value="377" class="abs high">308/377</td>
<td data-value="69.52" class="pct medium">69.52%</td>
<td data-value="210" class="abs medium">146/210</td>
<td data-value="84.09" class="pct high">84.09%</td>
<td data-value="44" class="abs high">37/44</td>
<td data-value="83.9" class="pct high">83.9%</td>
<td data-value="354" class="abs high">297/354</td>
<td data-value="83.74" class="pic high"><div class="chart"><div class="cover-fill" style="width: 83%;"></div><div class="cover-empty" style="width:17%;"></div></div></td>
<td data-value="83.74" class="pct high">83.74%</td>
<td data-value="369" class="abs high">309/369</td>
<td data-value="69.86" class="pct medium">69.86%</td>
<td data-value="209" class="abs medium">146/209</td>
<td data-value="88.1" class="pct high">88.1%</td>
<td data-value="42" class="abs high">37/42</td>
<td data-value="85.88" class="pct high">85.88%</td>
<td data-value="347" class="abs high">298/347</td>
</tr>

</tbody>
@@ -77,7 +77,7 @@ <h1>
</div><!-- /wrapper -->
<div class='footer quiet pad2 space-top1 center small'>
Code coverage
generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at Sat Aug 18 2018 15:11:58 GMT-0500 (CDT)
generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at Tue Aug 21 2018 21:31:45 GMT-0500 (CDT)
</div>
</div>
<script src="../prettify.js"></script>
Oops, something went wrong.

0 comments on commit 511d080

Please sign in to comment.