Javascript "Building ListViews with Avatars/Thumbnails" Sample page


#1

I am using the “Building ListViews with Avatars/Thumbnails” sample page and I am trying to navigate between pages. I am having trouble figuring out what I am missing, because when I click the page “Edit Profile” page, it does not navigate to it. Here is my code below, thanks!

settings-page.js

const app = require(“application”);

const SettingsViewModel = require("./settings-view-model");

function onNavigatingTo(args) {
const page = args.object;
page.bindingContext = new SettingsViewModel();
}

function onDrawerButtonTap(args) {
const sideDrawer = app.getRootView();
sideDrawer.showDrawer();
}

exports.onNavigatingTo = onNavigatingTo;
exports.onDrawerButtonTap = onDrawerButtonTap;

settings-page.xml

<ActionBar class="action-bar">
    <!-- 
    Use the NavigationButton as a side-drawer button in Android
    because ActionItems are shown on the right side of the ActionBar
    -->
    <NavigationButton ios:visibility="collapsed" icon="res://menu" tap="onDrawerButtonTap"></NavigationButton>
    <!-- 
    Use the ActionItem for IOS with position set to left. Using the
    NavigationButton as a side-drawer button in iOS is not possible,
    because its function is to always navigate back in the application.
    -->
    <ActionItem icon="res://navigation/menu" 
        android:visibility="collapsed" 
        tap="onDrawerButtonTap"
        ios.position="left">
    </ActionItem>
    <Label class="action-bar-title" text="Settings"></Label>
</ActionBar>


<ListView items="{{ items }}" itemTap="onItemTap" class="list-group">
    <ListView.itemTemplate>
        <StackLayout orientation="horizontal" class="list-group-item">
            <Image row="0" col="0" src="{{ description }}" class="thumb img-circle" rowSpan="1"></Image>
            <Label row="0" col="1" text="{{ name }}"></Label>
        </StackLayout>
    </ListView.itemTemplate>
</ListView>

settings-view-model.js

const observableModule = require(“data/observable”);

const SelectedPageService = require("…/shared/selected-page-service");

function SettingsViewModel() {
SelectedPageService.getInstance().updateSelectedPage(“Settings”);

const viewModel = observableModule.fromObject({
    items: [
        {
            name: "Edit Profile",
            //description: "&#xf0f3;"
            description: "https://image.freepik.com/free-icon/user-shape_318-42150.jpg"
        },
        {
            name: "Banks & Cards",
            description: "https://upload.wikimedia.org/wikipedia/commons/thumb/2/2a/Credit_card_font_awesome.svg/2000px-Credit_card_font_awesome.svg.png"
        },
        {
            name: "Privacy",
            description: "https://upload.wikimedia.org/wikipedia/commons/thumb/8/8c/Lock_font_awesome.svg/2000px-Lock_font_awesome.svg.png"
        },
        {
            name: "Notifications",
            description: "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b3/Bell_alt_font_awesome.svg/2000px-Bell_alt_font_awesome.svg.png"
        },
        {
            name: "Touch ID",
            description: "https://cdn1.iconfinder.com/data/icons/body-parts/24/Fingerprint-2-512.png"
        },
        {
            name: "Change Password",
            description: "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/Font_Awesome_5_solid_key.svg/2000px-Font_Awesome_5_solid_key.svg.png"
        },
        {
            name: "Sign Out",
            description: "https://upload.wikimedia.org/wikipedia/commons/thumb/d/db/Signout_font_awesome.svg/2000px-Signout_font_awesome.svg.png"
        }
    ]
});

SelectedPageService.getInstance().selectedPage$
.subscribe((selectedPage) => { viewModel.selectedPage = selectedPage; });

return viewModel;

}

module.exports = SettingsViewModel;


#2

If the problem is navigation, please share the relevant code. I don’t see anything related navigate or definition for onItemTap method.