[SOLVED] Routable popups Component Page Events

Questions
1

Why trying to use the component page events on a routable popup, nothing happens. they dont fire up.

on: {
  pageMounted: function (e, page) {
    console.log('page mounted');
  },
  pageInit: function (e, page) {
    console.log(this.username); // -> 'johndoe'
  },
  pageBeforeIn: function (e, page) {
    console.log('page before in');
  },
  pageAfterIn: function (e, page) {
    console.log('page after in');
  },
  pageBeforeOut: function (e, page) {
    console.log('page before out');
  },
  pageAfterOut: function (e, page) {
    console.log('page after out');
  },
  pageBeforeUnmount: function (e, page) {
    console.log('page before unmount');
  },
  pageBeforeRemove: function (e, page) {
    console.log('page before remove');
  },
}

But The lifecycle hooks work

2

in routes:

popup : {
    ...
    on : {
       open : function (...){
           ...
       }
    }
}
3

thats kinda complciated, so how can i change forexample the data which is used to display template?

4 
routes : [
    {
    	path: '/add',
    	popup : {
    		componentUrl: './pages/add.html',
    		on : {
    			open : function (...) {
    				//Event
    			},
    		},
    	},
    },

…

in add.html:

<template>
    <div class="popup" id="...">
        <div class="view">
            <div class="page">
                <div class="navbar">
                   ...
                </div>
                <div class="page-content">
                   ...
                </div>
            </div>
        </div>
    </div>
</template>
1 Like
5

Thanks but i already got that,

what i am asking for is, when i am using ajax to request information, is there a way for me to add that the variable in the popup??

6

thats my code so far

route.js:

{
	path: '/rec-details/:id',
	popup: {
		componentUrl: './pages/rec-details.htm',
		on : {
			open : function (popup) {
				console.log(popup);
				popup.app.preloader.show();
				api.getRec(popup.route.params.id,function (data) {
					data = JSON.parse(data);
					if(!data.error) {
						popup.app.preloader.hide();
						popup.rec: data,
					}
				});
			},
			close : function (popup) {
				console.log(app.preloader);
				popup.app.preloader.hide();
			}
		}
	}
},

And in rec-details.htm:

<template>
	<div class="popup">
		<div class="view">
			<div class="page">
				<div class="navbar bg-color-white text-color-black no-shadow">
					<div class="navbar-inner">
						<div class="left">
							<a class="link back">
								<i class="icon icon-back"></i>
								<span class="ios-only">ZurrĂĽck</span>
							</a>
						</div>
						<div class="title">{{rec.title}}</div>
						<div class="right">
							<a href="#" class="link">
								<i class="fas fa-ellipsis-v"></i>
							</a>
						</div>
					</div>
				</div>
				<div class="page-content">
				...
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	return {
		data: function () {
			return  {
				rec : {},
			}
		},
		methods: {
			openAlert: function (text) {
				var self = this;
				self.$app.dialog.alert(text);
			},
		},
		on : {
			open : function (popup) {
				console.log(popup);
			}
		}
	}
</script>

if it deosnt work i will just use a normal page component

7

https://framework7.io/docs/router-component.html#virtual-dom

8

Event name must be “popupOpen” not “open” in component.

9

well in component nothing other the lifecycle events work

10

So after spending some time to figur out a good way todo it I used the mounted function and that code:

	mounted : function () {
		var self = this;
		console.log(self);
		self.$app.preloader.show();
		api.getRec(self.$route.params.id,function (data) {
			data = JSON.parse(data);
			if(!data.error) {
				self.$app.preloader.hide();
				self.$setState({
					rec: data,
				});
			}
		});
	}