PWA Webpack installed with cli. (tried with single and split view)
var app = new Framework7({ was undefined in other pages so i put var appto index.html
i tried template7 in a page like this but $$ undefined
<script id="template" type="text/template7">
<p>Hello, my name is {{firstName}} {{lastName}}</p>
</script>
<script>
var template = $$('#template').html();
// compile it with Template7
var compiledTemplate = Template7.compile(template);
// Now we may render our compiled template by passing required context
var context = {
firstName: 'John',
lastName: 'Doe'
};
var html = compiledTemplate(context);
alert(html)
</script>
</div>
</template>
<script>
export default {};
</script>
I also tried virtual list but title and subtitle are missing in list…
<script>
var items = [];
for (var i = 1; i <= 10; i++) {
items.push({
title: 'Item ' + i,
subtitle: 'Subtitle ' + i
});
}
var virtualList = app.virtualList.create({
// List Element
el: '.virtual-list',
// Pass array with items
items: items,
// Custom search function for searchbar
searchAll: function(query, items) {
var found = [];
for (var i = 0; i < items.length; i++) {
if (items[i].title.toLowerCase().indexOf(query.toLowerCase()) >= 0 || query.trim() === '') found.push(i);
}
return found; //return array with mathced indexes
},
// List item Template7 template
itemTemplate: '<li class="text-color-red">' +
'<a href="#" class="item-link item-content">' +
'<div class="item-inner">' +
'<div class="item-title-row">' +
'<div class="item-title">{{title}}</div>' +
'</div>' +
'<div class="item-subtitle">{{subtitle}}</div>' +
'</div>' +
'</a>' +
'</li>',
// Item height
//height: app.theme === 'ios' ? 63 : (app.theme === 'md' ? 73 : 46),
});
console.log(virtualList);
</script>
</div>
</template>
<script>
export default {};
</script>
Please can you show me how to prepare js so i can write some pages…