mirror of https://github.com/sveltejs/svelte
parent
06f5f787f9
commit
3560bbe85e
@ -0,0 +1,12 @@
|
||||
import * as assert from 'assert';
|
||||
|
||||
export default {
|
||||
test ( component, target ) {
|
||||
const items = component.get( 'items' );
|
||||
items.forEach( item => item.completed = false );
|
||||
|
||||
component.set({ currentFilter: 'all' });
|
||||
|
||||
assert.equal( target.innerHTML, `<ul><li>one</li><!--#if filter(item, currentFilter)--><li>two</li><!--#if filter(item, currentFilter)--><li>three</li><!--#if filter(item, currentFilter)--><!--#each items--></ul>` );
|
||||
}
|
||||
};
|
@ -0,0 +1,28 @@
|
||||
<ul>
|
||||
{{#each items as item}}
|
||||
{{#if filter(item, currentFilter)}}
|
||||
<li>{{item.description}}</li>
|
||||
{{/if}}
|
||||
{{/each}}
|
||||
</ul>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: () => ({
|
||||
currentFilter: 'completed',
|
||||
items: [
|
||||
{ description: 'one', completed: false },
|
||||
{ description: 'two', completed: false },
|
||||
{ description: 'three', completed: false }
|
||||
]
|
||||
}),
|
||||
|
||||
helpers: {
|
||||
filter ( item, currentFilter ) {
|
||||
if ( currentFilter === 'all' ) return true;
|
||||
if ( currentFilter === 'completed' ) return item.completed;
|
||||
if ( currentFilter === 'active' ) return !item.completed;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
Loading…
Reference in new issue