I have a problem rendering my components (v3 Latest release).
Here is my route:
`{
path: '/load-sign-up-form/:address/:lat/:lon',
async: function(routeTo, routeFrom, resolve, reject) {
//router
var router = this;
//app
var app = router.app;
var place_name = routeTo.params.address;
var lat = routeTo.params.lat;
var lon = routeTo.params.lon;
resolve(
{
componentUrl: './pages/sign-up-page.html'
},
{
context: {
address: place_name,
lat: lat,
lon: lon
}
}
);
}
},`
And On my sign-up-page.html component: I have
My DOM7 is rendered referred to as $$
`
return {
data: function () {
return {
departments: null,
API_URL = ‘https://api.website.com/’,
}
},
methods: {
//validate email
isEmail: function(email) {
var regex = /^([a-zA-Z0-9_.±])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
return regex.test(email);
},
//register
signUp: function () {
var self = this;
var app = self.$app;
var $ = self.$$;
var router = app.router;
var full_name = $('input#full_name').val();
var email_address = $('input#email').val();
var password = $('input#password').val();
var dob = $('input#dob').val();
var clinic_name = $('input#clinic_name').val();
var phonenumber = $('input#phonenumber').val();
var department = $('select#department').val();
var gender = $('select#gender').val();
var valid_from = $('input#valid_from').val();
var valid_to = $('input#valid_to').val();
var lat = $('input#lat').val();
var lon = $('input#lon').val();
var address = $('input#address').val();
//validate now
if(//Validate data here...)
}
else
{
router.navigate('/sign-up-now/'+full_name+'/'+email_address+'/'+password+'/'+dob+'/'+valid_from+'/'+valid_to+'/'+phonenumber+'/'+gender+'/'+clinic_name+'/'+department+'/'+lat+'/'+lon+'/'+address);
}
},
//Native Toasts
showToast: function(text,duration,position,opacity,backgroundColor) {
window.plugins.toast.showWithOptions(
{
message: text,
duration: duration,
position: position,
styling: {
opacity: opacity,
backgroundColor: backgroundColor,
textColor: '#FFFFFF',
cornerRadius: 0
}
}
);
},
noConnection: function() {
var self = this;
var message = 'Error, Poor Internet Connection!';
var stayFor = '5000';
var position_at = 'center';
var opacity = '0.8';
var backgroundColor = '#333333';
self.showToast(message,stayFor,position_at,opacity,backgroundColor);
}
},
// Page Events
on: {
pageInit: function(e, page) {
var self = this;
var app = self.$app;
var $ = self.$$;
var router = app.router;
// Calender dob
self.calendarModal1 = app.calendar.create({
inputEl: '#my-calendar-default',
openIn: 'customModal',
header: true,
footer: true,
dateFormat: 'MM dd yyyy',
});
// Calender valid from
self.calendarModal2 = app.calendar.create({
inputEl: '#my-calendar-valid-from',
openIn: 'customModal',
header: true,
footer: true,
dateFormat: 'MM dd yyyy',
});
// Calender valid to
self.calendarModal3 = app.calendar.create({
inputEl: '#my-calendar-valid-to',
openIn: 'customModal',
header: true,
footer: true,
dateFormat: 'MM dd yyyy',
});
self.numpadLimited = app.keypad.create({
inputEl: '#demo-numpad-limited',
valueMaxLength: 10,
dotButton: false
});
//Load depts
app.dialog.preloader("Preparing, Please Wait...");
app.request({
url: self.API_URL + 'departments.php',
dataType: 'json',
method: 'GET',
cache: true,
timeout: 5000,
crossDomain: true,
success: function(data) {
app.dialog.close();
self.$setState({
departments: data,
});
},
error: function() {
app.dialog.close();
self.noConnection();
router.back();
}
});
}
},
pageBeforeRemove() {
var self = this;
self.calendarModal1.destroy();
self.calendarModal2.destroy();
self.calendarModal3.destroy();
},
}
</script>`
My sign up button:
<button class="col button button-big button-fill color-red" @click="signUp">PROCEED AND REGISTER</button>
Here Is how i render what I I get from API
<li> {{#if departments}} <!-- Show dept list when it is loaded --> <a class="item-link smart-select smart-select-init" data-open-in="sheet"> <select id="department" required> <option value="" selected>None Selected</option> {{#each departments}} <option value="{{dept_id}}">{{dept_name}}</option> {{/each}} </select> <div class="item-content"> <div class="item-inner"> <div class="item-title">DEPARTMENT</div> </div> </div> </a> {{else}} <!-- Otherwise show preloader --> <div class="block block-strong text-align-center"> <div class="preloader"></div> </div> {{/if}} </li>
My context like this:
`<input type="hidden" id="lat" value={{lat}}>
<input type="hidden" id="lon" value={{lon}}>
<input type="hidden" id="address" value={{address}}>`
departments is an array like:
{dept_id:1, dept_name: somename},{dept_id:1, dept_name: somename}....
It cant show nothing…