Hello,
I’m updating my app to V5 and it’s awesome so far, but I ran into this error message:
Error: Framework7: can’t create a View instance because the selector “#view-home” didn’t match any element
I don’t understand why this happened. I believe I declared my views correctly. I consulted the docs, nothing seems to have changed.
Here’s the code inside .views div (the app is using a tabbed interface) on app.f7.html:
<div id="view-home" class="view view-main view-init tab tab-active" data-url="/">
</div>
<div id="view-take-picture" class="view view-init tab" data-view="take-picture" data-url="/take-picture/">
</div>
<div id="view-me" class="view view-init tab" data-view="me" data-url="/me/">
</div>
Here’s what’s on routes.js:
import HomePage from '../pages/home.f7.html';
import TakePicturePage from '../pages/take-picture.f7.html';
import MePage from '../pages/me.f7.html';
var routes = [
{
path: '/',
component: HomePage,
},
{
path: '/take-picture/',
component: TakePicturePage,
},
{
path: '/me/',
component: MePage,
},
{
path: '(.*)',
component: NotFoundPage,
},
];
Then on app.js:
var homeView = app.views.create('#view-home', {
url: '/',
name: 'home',
stackPages:true
});
var takepictureView = app.views.create('#view-take-picture', {
url: '/take-picture/',
name: 'takepicture'
});
var meView = app.views.create('#view-me', {
url: '/me/',
name: 'me'
});
Can someone tell me what I did wrong?
Thanks in advance!