Helper Views
Helper Views
Define a rich-content view
Define a list of rich-content views for your helper using the views
object.
Each key will correspond to the unique view name within the helper, whereas the value is required to be an object to define its configuration, including what helpers are allowed to be dropped into the view.
Fliplet.Helper({
name: 'slider',
render: {
template: [
'<div data-view="myFirstView"></div>',
'<div data-view="mySecondView"></div>',
'<div data-view="myThirdView"></div>'
].join('')
},
views: [
{ name: 'myFirstView', displayName: 'View 1' },
{ name: 'mySecondView', displayName: 'View 2', allow: ['slide'] },
{ name: 'myThirdView', displayName: 'View 3', allow: [] }
]
});
The example above defines three views:
myFirstView
allows any helper to be dropped inmySecondView
only allows an helper calledslide
to be dropped inmyThirdView
only allows no helpers to be dropped in
Define a placeholder for a rich-content view
Views can define a placeholder HTML to be rendered when empty. Use the placeholder
attribute as detailed here below:
Fliplet.Helper({
name: 'slider',
render: {
template: [
'<div data-view="myFirstView"></div>'
].join('')
},
views: [
{
name: 'myFirstView',
displayName: 'View 1',
placeholder: '<p>Please drop content here</p>'
}
]
});
Further reading
Next article in this series
Styling
Learn more about styling your helpers with CSS.