Line was included for some testing only, so you can just remove it
<script src="js/jquery-3.4.1.min.js"></script>
so actually it will not be used, also all the jquery API’s are exist in one way or another in F7
I tried to adjust the code you provided to my project, but without any luck
I managed to trigger the edit button action and changed the edit from false to true, but after that I was not able to rebuild/refresh/re-render the virtual list
it’s so much appropriated your help, as I’m still in the beginning of using this framework
my modified source as below
<html class="ios device-pixel-ratio-1 device-desktop device-windows">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>My App</title>
<link rel="stylesheet" href="css/framework7.bundle.min.css">
<link rel="stylesheet" href="css/framework7-icons.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style type="text/css">
.moving-div {
position: relative;
}
.list.virtual-list ul div.list-group.moving-div ul {
padding-left: 0;
}
</style>
</head>
<body>
<div id="app">
<div class="view view-main view-init">
<div class="page">
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner sliding">
<div class="title">Virtual List</div>
<div class="right">
<a href="#" class="link" @click="toggle">
Edit
</a>
</div>
<div class="subnavbar">
<form data-search-container=".virtual-list" data-search-item="li" data-search-in=".item-title"
class="searchbar searchbar-init">
<div class="searchbar-inner">
<div class="searchbar-input-wrap">
<input type="search" placeholder="Search"/>
<i class="searchbar-icon"></i>
<span class="input-clear-button"></span>
</div>
<span class="searchbar-disable-button if-not-aurora">Cancel</span>
</div>
</form>
</div>
</div>
</div>
<div class="searchbar-backdrop"></div>
<div class="page-content">
<div class="list simple-list searchbar-not-found">
<ul>
<li>Nothing found</li>
</ul>
</div>
<div class="list virtual-list media-list searchbar-found">
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/framework7.bundle.min.js"></script>
<script>var theme = 'ios';
if (location.href.indexOf('theme=md') >= 0) theme = 'md';
if (location.href.indexOf('theme=aurora') >= 0) theme = 'aurora';
var plugin = {
params: {
theme: theme,
root: '#app',
}
};
if (Framework7.use) Framework7.use(plugin);
else if (Framework7.Class && Framework7.Class.use) Framework7.Class.use(plugin);
var app = new Framework7({
iosTranslucentBars: false,
iosTranslucentModals: false,
panel: {
swipe: 'left',
},
data: function () {
return {
selDataIdx: null,
edit: true
};
},
methods: {
mark: function(){ app.dialog.alert('Mark'); },
toggle: function(){ app.data.edit = !app.data.edit; }
}
});
// Dummy items array
var items = [];
var j = 1;
for (var i = 1; i <= 1000; i++) {
items.push({
title: 'Item ' + i,
subtitle: 'Subtitle ' + i,
index: i,
header: 'header ' + j
});
if (i % 100 === 0) {
j++;
}
}
function createItemDiv() {
var d = document.createElement('div');
d.className = 'list-group moving-div';
var u = document.createElement('ul');
d.appendChild(u);
return {d, u};
}
function onVirtualBeforeInsert(vlist, fragment) {
var self = this;
var list = Dom7(vlist.ul);
var virtualItems = [];
var first = true;
var top;
while (fragment.hasChildNodes()) {
var c = fragment.removeChild(fragment.firstChild);
if (first) {
first = false;
top = c.style.top;
}
Dom7(c).css('top', '');
virtualItems.push(c);
}
var previousName = null;
var addedHeaders = [];
var e;
virtualItems.forEach(item => {
var headerName = Dom7(item).attr('data-header-name');
if (previousName !== headerName) {
previousName = headerName;
e = createItemDiv();
fragment.appendChild(e.d);
Dom7(e.d).css('top', top);
var h = document.createElement('li');
h.className = 'list-group-title';
h.appendChild(document.createTextNode(headerName));
e.u.appendChild(h);
addedHeaders.push(e);
}
e.u.appendChild(item);
});
vlist.setListSize();
list.css({height: `${list.height() + ((app.theme == 'ios' ? 80 : 48) * addedHeaders.length)}px`});
}
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 key="{{index}}" class="swipeout" data-header-name="{{header}}">
{{#unless @root.edit}}
<div class="swipeout-content">
<a href="#" class="item-link item-content">
{{else}}
<label class="item-checkbox item-content">
<input type="checkbox" name="name" value="{{index}}"/>
<i class="icon icon-checkbox"></i>
{{/unless}}
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">{{title}}</div>
</div>
<div class="item-subtitle">{{subtitle}}</div>
</div>
{{#unless @root.edit}}
</a>
</div>
<div class="swipeout-actions-left">
<a href="#" class="color-orange" @click="mark">Mark</a>
</div>
{{else}}
</label>
{{/unless}}
</li>
`,
// Item height
height: app.theme === 'ios' ? 80 : (app.theme === 'md' ? 73 : 46),
on: {
itemsBeforeInsert: onVirtualBeforeInsert
}
});
// create searchbar
var searchbar = app.searchbar.create({
el: '.searchbar',
searchContainer: '.virtual-list',
searchIn: '.item-subtitle, .item-title',
on: {
search(sb, query, previousQuery) {
console.log(query, previousQuery);
}
}
});
</script>
</body>
</html>