I have a problem…
When I use this router component : if I update the myName value from “Olivier” to “John” and apply a setState, the update is effective on the component template, but not on the popover created in the pageInit section.
It don’t take the new myName value.
Is it a normal behavior ? Thanks a lot
{
path: '/spaces-members/',
// Component Object
component: {
template: `
<div class="page">
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner">
<div class="title">{{title}}</div>
</div>
</div>
<div class="page-content">
<a @click="openAlert" class="red-link">Open Alert {{myName}}</a>
<div class="list simple-list">
<ul>
{{#each names}}
<li>{{this}}</li>
{{/each}}
</ul>
</div>
</div>
</div>
`,
style: `
.red-link {
color: red;
}
`,
data: function () {
return {
title: 'Component Page',
names: ['John', 'Vladimir', 'Timo'],
myName : 'Olivier'
}
},
methods: {
openAlert: function () {
var self = this;
self.$app.dialog.alert('Hello world!'+this.myVar);
},
},
on: {
pageInit: function (e, page) {
var self=this;
// do something on page init
setTimeout( function() {
self.$setState({myName : 'John'});
}, 2000)
// Create dynamic Popover
var dynamicPopover = app.popover.create({
targetX: 2500,
targetY: 40,
content: '<div class="popover">'+
'<div class="popover-inner">'+
'<div class="block">'+
'<p>Hello '+this.myName+'</p>'+
'<p><a href="#" class="link popover-close">Close me</a></p>'+
'</div>'+
'</div>'+
'</div>',
// Events
on: {
open: function (popover) {
console.log('Popover open');
},
opened: function (popover) {
console.log('Popover opened');
},
}
});
// Events also can be assigned on instance later
dynamicPopover.on('close', function (popover) {
console.log('Popover close');
});
dynamicPopover.on('closed', function (popover) {
console.log('Popover closed');
});
// Open dynamic popover
$$('.dynamic-popover').on('click', function () {
dynamicPopover.open();
});
dynamicPopover.open();
},
pageAfterOut: function (e, page) {
// page has left the view
},
}
},
}