Checking the sample online and knowing template7 is not more in v6 how will you pass data to content in a dynamic sheet in v6?
here a dynamic sheet modal
// Create sheet modal
if (!sheet) {
sheet = $f7.sheet.create({
content: '\
<div class="sheet-modal">\
<div class="toolbar">\
<div class="toolbar-inner justify-content-flex-end">\
<a href="#" class="link sheet-close">Close</a>\
</div>\
</div>\
<div class="sheet-modal-inner">\
<div class="page-content">\
<div class="block">\
<p>This sheet modal was created dynamically</p>\
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus mauris leo, eu bibendum neque congue non. Ut leo mauris, eleifend eu commodo a, egestas ac urna. Maecenas in lacus faucibus, viverra ipsum pulvinar, molestie arcu. Etiam lacinia venenatis dignissim. Suspendisse non nisl semper tellus malesuada suscipit eu et eros. Nulla eu enim quis quam elementum vulputate. Mauris ornare consequat nunc viverra pellentesque. Aenean semper eu massa sit amet aliquam. Integer et neque sed libero mollis elementum at vitae ligula. Vestibulum pharetra sed libero sed porttitor. Suspendisse a faucibus lectus.</p>\
</div>\
</div>\
</div>\
</div>\
',
on: {...
In v5 I was using template7 but in v6
what should I change? I need to pass data to the content as before…
I tried like this it is not working for me…
sheet = $f7.sheet.create({
content: $h`
<div class="page">
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner">
<div class="title">${title}</div>
</div>
</div>
<div class="page-content">
<a @click=${openAlert} class="red-link">Open Alert</a>
<div class="list simple-list">
<ul>
${names.map((name) => $h`
<li>${name}</li>
`)}
</ul>
</div>
</div>
</div>
`,
...
I also tried this as an action inside store.js, and it prints out the array but incorrectly taking the comma ‘,’ as an array element too…
openSheet({
state
}, {
$f7, $
}, ) {
const title = 'This sheet modal was created dynamically';
const names = ['John', 'Vladimir', 'Timo'];
var sheet = $f7.sheet.create({
content: `
<div class="sheet-modal">
<div class="toolbar">
<div class="toolbar-inner justify-content-flex-end">
<a href="#" class="link sheet-close">Close</a>
</div>
</div>
<div class="sheet-modal-inner">
<div class="page-content">
<div class="block">
<p>${title}</p>
${names.map((name) => `
<p>${name}</p>
`)}
</div>
</div>
</div>
</div>
`,
on: {
open: function (sheet) {
console.log('sheet opening...');
},
opened: function (sheet) {
console.log('sheet opened...');
},
close: function (sheet) {
console.log('sheet closing...');
},
closed: function (sheet) {
console.log('sheet closed...');
sheet.destroy();
},
},
});
sheet.open();
},
output error taking also the comma as an array element to print:
John
,
Vladimir
,
Timo
,
here the image showing the problem:
I also tried this way
openSheet({
state
}, {
$f7, $, $h
}, ) {
const title = 'This sheet modal was created dynamically';
const names = ['John', 'Vladimir', 'Timo'];
var tmp = $h`
<div class="sheet-modal">
<div class="toolbar">
<div class="toolbar-inner justify-content-flex-end">
<a href="#" class="link sheet-close">Close</a>
</div>
</div>
<div class="sheet-modal-inner">
<div class="page-content">
<div class="block">
<p>${title}</p>
${names.map((name) => $h`
<p>${name}</p>
`)}
</div>
</div>
</div>
</div>
`;
console.log(tmp);
var sheet = $f7.sheet.create({
content: tmp,
on: {
open: function (sheet) {
console.log('sheet opening...');
},
opened: function (sheet) {
console.log('sheet opened...');
},
close: function (sheet) {
console.log('sheet closing...');
},
closed: function (sheet) {
console.log('sheet closed...');
sheet.destroy();
},
},
});
sheet.open();
},
but I get this error in the console:
Unhandled Promise Rejection: TypeError: undefined is not an object (evaluating 'modal.params.animate')
printing the tmp variable to the console seems OK
console.log(tmp);
See image
I did not find any sample for dynamic modal sheet in v6 with dynamic content feed in the documentation…
Am I missing something or is not the correct way? maybe a good sample for modal sheet with dynamic content will help!
Any tip or help appreciated!
