I have an old app and I’m trying to upgrade it to meet some Android requirements). So one thing I need to do is to start using the component/template system. I’ve spent a few days trying to get a very basic component/page working to no avail.
Here’s how Dom7 and the app var are defined in app.js:
var $$ = Dom7;
var app;
// return the app instance to the caller
app.init();
return(app);
In the routes.js I have the following routes entry:
{
path: '/test/',
componentUrl: './pages/test.html'
},
This is the test component/page I’m trying to load:
<template>
<div class="page" id="testPage" data-name="test">
<div class="page-content">
<div class="block-title">Test Page</div>
<div class="list">
<ul>
<li>
<label class="item-radio item-radio-icon-start item-content">
<input type="radio" name="demo-radio-start" value="Books" checked />
<i class="icon icon-radio"></i>
<div class="item-inner">
<div class="item-title">Books</div>
</div>
</label>
</li>
<li>
<label class="item-radio item-radio-icon-start item-content">
<input type="radio" name="demo-radio-start" value="Movies" />
<i class="icon icon-radio"></i>
<div class="item-inner">
<div class="item-title">Movies</div>
</div>
</label>
</li>
<li>
<label class="item-radio item-radio-icon-start item-content">
<input type="radio" name="demo-radio-start" value="Food" />
<i class="icon icon-radio"></i>
<div class="item-inner">
<div class="item-title">Food</div>
</div>
</label>
</li>
<li>
<label class="item-radio item-radio-icon-start item-content">
<input type="radio" name="demo-radio-start" value="Drinks" />
<i class="icon-radio"></i>
<div class="item-inner">
<div class="item-title">Drinks</div>
</div>
</label>
</li>
</ul>
</div><!-- end of list -->
<div class="block">
<div class="row">
<button class="col button button-large green" onclick="showSpinner();">Show</button>
<button class="col button button-large green" onclick="hideSpinner();">Hide</button>
</div>
</div>
</div> <!-- end of content area -->
</div> <!-- end of page -->
</template>
<script>
// script must return/export component function
export default (props, {$$, $$on }) => {
const title = 'Test Page';
$$on('pageInit', () => {
// do something on page init
console.log("testPageInit");
$("#testPage").on('swiperight', function(e) {
app.views.main.router.back('/help/', {force: true, ignoreCache: true, reload: true});
});
});
$$on('pageAfterOut', () => {
// page has left the view
});
// component function must return render function
return $$render;
}
</script>
And that page is called from my help page using a jquery button handler
// this is line 22 in help.js and is throwing the error
$( "#btnTest" ).click(function() {
app.views.main.router.navigate('/test/', {force: 'true', ignoreCache: true});
When the button handler is clicked it produces the following error (which references line 22 in help.js which is the above click handler):
framework7-bundle.js:10651 Uncaught (in promise) Error: TypeError: Cannot create property 'elm' on string '[object Object], '
at framework7-bundle.js:10651:21
(anonymous) @ framework7-bundle.js:10651
Promise.catch
compile @ framework7-bundle.js:10649
(anonymous) @ framework7-bundle.js:10682
Promise.then
componentLoader @ framework7-bundle.js:10672
pageComponentLoader @ framework7-bundle.js:10729
load @ framework7-bundle.js:6904
(anonymous) @ framework7-bundle.js:7050
resolve @ framework7-bundle.js:7047
(anonymous) @ framework7-bundle.js:7153
enterNextRoute @ framework7-bundle.js:6137
leaveCurrentRoute @ framework7-bundle.js:6151
processRouteQueue @ framework7-bundle.js:6155
navigate @ framework7-bundle.js:7145
(anonymous) @ help.js:22
dispatch @ jquery-3.4.1.min.js:2
v.handle @ jquery-3.4.1.min.js:2
Any thoughts?