Skip to content
Permalink
Browse files

copy update

  • Loading branch information
squallstar committed Dec 2, 2019
1 parent 2bea313 commit 27b53194d7b25c4ea28f199f704597b08d6c40cf
Showing with 47 additions and 43 deletions.
  1. +47 −43 docs/API/fliplet-shortcode.md
@@ -20,21 +20,21 @@ Fliplet.Shortcode('welcome', {
{! end welcome }
```

All properties of [Vue.js](https://vuejs.org/v2/api/#Options-Data) are supported in the shortcodes `definition`.
`data` can either be an object or a function returning an object or a promise returning an object.

---

### Attributes

#### Passing attributes to a shortcode

Attributes can be passed to shortcodes and then accessed via `attr.<name>` in HTML or `this.attr.<name>` in JS.
Attributes can be passed to shortcodes and then accessed via their name in HTML or `this.data.<name>` in JS.

Please note that attribute names are be converted to camelCase, e.g. `last-name` becomes `lastName` as the example below shows:

```html
{! start welcome last-name="Doe" !}
<p>Hi {! firstName !} {! attr.lastName}, how are you?</p>
<p>Hi {! firstName !} {! lastName !}, how are you?</p>
{! end welcome }
```

@@ -44,7 +44,7 @@ Fliplet.Shortcode('welcome', {
firstName: 'John'
},
mounted: function () {
console.log(`Your last name is ${this.attr.lastName}`);
console.log(`Your last name is ${this.data.lastName}`);
}
});
```
@@ -57,24 +57,24 @@ Fliplet.Shortcode('welcome', {

```js
Fliplet.Shortcode('welcome', {
template: '<p>Hi {! firstName !} {! attr.lastName}, how are you?</p>'
template: '<p>Hi {! firstName !} {! lastName !}, how are you?</p>'
data: {
firstName: 'John'
}
});
```

```html
{! welcome last_name="Doe" !}
{! welcome last-name="Doe" !}
```

#### Defining an outer template

Use the `<slot></slot>` tag to define the distribution outlet for content.
Use the `<fl-html />` tag to define the distribution outlet for content.

```js
Fliplet.Shortcode('welcome', {
template: '<p>How are you? <slot></slot></p>'
template: '<p>How are you? <fl-html /></p>'
data: {
firstName: 'John'
}
@@ -98,60 +98,64 @@ Output:

---

### Nested shortcodes

#### Register a nested shortcode

Pass the `child: true` attribute in the shortcode definition to register the shortcode as a nested shortcode for other shortcodes.

```js
Fliplet.Shortcode('greet', {
template: '<p>Hi {! firstName !} {! attr.lastName !}</p>'
data: {
firstName: 'John'
},
child: true
});
Fliplet.Shortcode('welcome', {});
```

```html
{! start welcome !}
<h1>Welcome to the app!</h1>
{! greet last-name="Doe" !}
{! end welcome }
```

---

### Loading data

#### From a DataSource

```js
Fliplet.Shortcode('profile', {
data: {
user: undefined
},
mounted: function () {
var instance = this;
data: function () {
var firstName = this.data.firstName;
Fliplet.DataSources.connect(123)
.then(function (connection) {
return connection.findOne({ where: { name: instance.attr.name } });
return connection.findOne({ where: { firstName: firstName } });
}).then(function (entry) {
instance.user = entry.data;
return { user: entry.data };
});
}
});
```

```html
{! start profile name="John" !}
{! start profile first-name="Nick" !}
<p>Searched by {! firstName }</p>
<ul>
<li>Email: {! user.email !}</li>
<li>Name: {! user.name !}</li>
</ul>
{! end profile !}
```

---

### Run logic once a shortcode is rendered

```js
Fliplet.Shortcode('profile', {
data: {
firstName: 'John'
},
ready: function () {
// Shortcode has been rendered
}
);
```
---
### Programmatically update values
```js
var profile = Fliplet.Shortcode('profile', {
data: {
firstName: 'John'
}
);
profile.set('firstName', 'Nick');
profile.set('firstName', function () {
return Promise.resolve('Tony');
})
```

0 comments on commit 27b5319

Please sign in to comment.
You can’t perform that action at this time.