Bottom bar buttons not responding

So, I borrowed this bottom bar from another example and modified it to fit my app. The problem is, the four buttons on the bar don’t actually work, and I am not sure why. I would guess because Components don’t actually run the javascript code that I have put in. What other options do I have?

Here is the Component

	var Observable = require("FuseJS/Observable");
	var Backend = require("Modules/Backend");

	var profile = Backend.profile.value;
	var profileRole = Observable(profile.role);

	function bottomProfile() {
		var profilePage = Observable(profileRole.value + "Profile")

	function bottomSearch() {
		console.log("Search Pressed");

	function bottomNotifications() {

	function bottomNews() {

	module.exports = {
		bottomProfile: bottomProfile,
		bottomSearch: bottomSearch,
		bottomNotifications: bottomNotifications,
		bottomNews: bottomNews,

<Rectangle ux:Class="Divider" Width="1" Color="#fff7" Margin="0,12" />

<Container ux:Class="IconAndLabel" Subtree="iconContainer">
	<string ux:Property="Text" />
	<DockPanel ux:Binding="Children" Height="56" Padding="0,7">
		<Panel ux:Name="iconContainer" Alignment="Center" />
		<BaseText Dock="Bottom" Color="#aaa" Alignment="HorizontalCenter" FontSize="8" Value="{ReadProperty Text}" />

			<Scale Factor=".95" Duration=".08" Easing="QuadraticOut" />

<IconAndLabel Text="PROFILE" Clicked="{bottomProfile}">
	<ProfileIcon />

<Divider />

<IconAndLabel Text="NOTIFICATIONS" Clicked="{bottomNotifications}" >
	<NotificationsIcon />

<Divider />

<IconAndLabel Text="SEARCH" Clicked="{bottomSearch}">
	<SearchIcon />

<Divider />

<IconAndLabel Text="NEWS" Clicked="{bottomNews}">
	<NewsIcon />

<Rectangle Layer="Background" Color="#003366" />

And here is an example of it being used in the app.

<Page ux:Class="PlayerProfile">
<Router ux:Dependency="router" />

<JavaScript File="PlayerProfile.js" />

<DockPanel ClipToBounds="true">



		<StackPanel Width="92%" Padding="20">

			<Text Alignment="HorizontalCenter" FontSize="40" Margin="0,10,0,30">Profile</Text>
			<Text Alignment="Center" Value="{name}" Margin="0,0,0,30"/>

			<Text Alignment="Center" Value="Membership Level: {membership}" Margin="0,0,0,30"/>

			<Text Alignment="Center" Value="{info}" Margin="0,0,0,0" TextWrapping="Wrap"/>



	<CBL.BottomBar Dock="Bottom" />

<Activated Handler="{viewLoaded}" />

I realized my problem, I was just missing

<Router ux:Dependency=“router” />

in my component, and assigning it on the pages I use it. Fixed.

1 Like