Using route params in routes component template

Questions
1

I want to get current routes catid param and do a if query inside component without waiting for an async request response. No matter what I tried I couldn’t get the current route parameters, all I get is previous page parameters.

  path: '/:appId/:catID/:fID/',
	component: {
  template: `{{#if items}}<div data-name="{{items.dname}}" class="page single single-1 no-navbar" id="{{items.b}}" title="{{items.title}}">
 <div class="tabs-swipeable-wrap " id="{{items.gn}}"><a href="{{items.a0}}" class="{{items.a1}} close-button">
 </a> <div class="tabs listw" id="{{items.catsid}}">
  {{/if}}
 

{{#if items}}
<div id="tab-1" class="page-content no-padding-top tab  tab-active" >
 <div class="cblocks">
{{#if catID }} // I want to get current routes catid param and do a if query here.

<div class="content"><a id="play" class="aplay"><div class="acontent"><div class="circle-wave"><button id="abutton" class="acontrols"></button></div></div></a>
{{else}}
<a class="pb-s no-fastclick" data-base="{{items.id}}" data-no="1"><img src="{{items.c}}" class="cover" alt="{{items.s15}}/></a><div class="content">
{{/if}}`,
		  data: function () {
		if (app.view.current.router.currentRoute.params.catID === "ringtones") // this does not compare the catid to the current routes catid.
			{ return {   

			items: {
			"dname":"ringtone","a0":"#","a1": " back ","s17": "link external ","s21":"red","s14":"color-red"
			}}
			} else
	{   return {  items:{
			"dname":"single","a0":"#","a1": " back ","s17": "link external ","s21":"red","s14":"color-red"
			}
			}}
    
    
  }
	  

},
2

OK, I have found out how to get route params inside template but now I want to know how can I make conditional template…

{{$route.params.catID}} gives me the catid param but below code does not work as intended, it does not compare catid value to given one:

path: ‘/:appId/:catID/:fID/’,
component: {
template: `
{{#if “$route.params.catID===‘ringtones’”}}


.
{{else}}
.
.
. 
{{/if}} `}
3

Use js_if helper https://idangero.us/template7/#.XzPhzC35bs0

4

Hi Vladimir, when I use js_if like below:

{{#js_if “$route.params.catID===‘ringtones’”}}ringtones {{else}}wallpapers{{/js_if}}

I get this error:
" framework.js:13 Uncaught (in promise) Error: ReferenceError: $route is not defined"

I use the latest version of FW7

5 
{{#js_if "this.$route.params.catID==='ringtones'"}}ringtones {{else}}wallpapers{{/js_if}}
1 Like
6

Thank you Vladimir it worked like a charm! I believe I tried adding this. before $route but I guess I made another mistake at that time.

7

Again I faced another problem, I can’t use js_if inside {{#each}} loop… below code gives error:
VM27457:1 Uncaught ReferenceError: $route is not defined

   {{#each tabs}}
<div id="tab-{{t0}}" class="page-content no-padding-top tab {{t1}}" {{t2}}>
{{#js_if "this.$route.params.catID==='ringtones'"}}
..
{{else}}
...
{{/js_if}}

 {{#each}}
8

this.$route.params.catID

change to

this.@root.$route.params.catID

2 Likes
9

Thanks it worked flawlessly!