Skip to content
Merged
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
100 changes: 100 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -173,6 +173,35 @@ else
p Foo is probably just foo in the end.
```

#### `conditionalTags`

Type: `array`\
Default: `['if', 'elseif', 'else']`

You can define custom tag names to use for creating a conditional.

Example:

```js
conditionalTags: ['when', 'elsewhen', 'otherwise']
```

```html
<when condition="foo === 'bar'">
<p>Foo really is bar! Revolutionary!</p>
</when>

<elsewhen condition="foo === 'wow'">
<p>Foo is wow, oh man.</p>
</elsewhen>

<otherwise>
<p>Foo is probably just foo in the end.</p>
</otherwise>
```

Note: tag names must be in the exact order as the default ones.

### Switch statement

Switch statements act like streamline conditionals. They are useful for when you want to compare a single variable against a series of constants.
Expand Down Expand Up @@ -201,6 +230,35 @@ locals: { foo: 'foo' }

Anything in the `expression` attribute is evaluated directly as an expressions.

#### `switchTags`

Type: `array`\
Default: `['switch', 'case', 'default']`

You can define custom tag names to use when creating a switch.

Example:

```js
switchTags: ['clause', 'when', 'fallback']
```

```html
<clause expression="foo">
<when n="'bar'">
<p>Foo really is bar! Revolutionary!</p>
</when>
<when n="'wow'">
<p>Foo is wow, oh man.</p>
</when>
<fallback>
<p>Foo is probably just foo in the end.</p>
</fallback>
</clause>
```

Note: tag names must be in the exact order as the default ones.

### Loops

You can use the `each` tag to build loops. It works with both arrays and objects. For example:
Expand Down Expand Up @@ -246,6 +304,27 @@ The value of the `loop` attribute is not a pure expressions evaluation, and it d

So you don't need to declare all the available variables (in this case, the index is skipped), and the expressions after `in` doesn't need to be a local variable, it can be any expressions.

#### `loopTags`

Type: `array`\
Default: `['each']`

You can define custom tag names to use for creating loops:

Example:

```js
loopTags: ['each', 'for']
```

You can now also use the `<for>` tag when writing a loop:

```html
<for loop="item in [1,2,3]">
<p>{{ item }}</p>
</for>
```

#### Loop meta

Inside a loop, you have access to a special `loop` object, which contains information about the loop currently being executed:
Expand Down Expand Up @@ -297,6 +376,27 @@ locals: {
</div>
```

#### `scopeTags`

Type: `array`\
Default: `['scope']`

You can define a custom tag name to use for creating scopes:

Example:

```js
scopeTags: ['context']
```

You can now also use the `<context>` tag when writing a scope:

```html
<context with="author">
<include src="components/profile.html"></include>
</context>
```

### Ignored tag

Anything inside this tag will not be parsed, allowing you to output delimiters and anything the plugin would normally parse, in their original form.
Expand Down