TabViewItem properties NOT data-bindable


#1

I’m trying to something that should be super simple as having a TabView with icons on its Tabs that change color when the corresponding tab is selected, however I have spent hours and hours without success and it seems the problem is that data binding does not work with TabViewItem properties.

I have done plenty of research and found an issue stating this is fixed:

How ever this does not seem to work. here is a very simple example:

MainScreen.xml:

<Page
    navigatingTo="onNavigatingTo"  
    xmlns="http://www.nativescript.org/tns.xsd">
    
    <ActionBar title="Main Screen On Tab">
    </ActionBar>
    <StackLayout>
        <Label text="Active Tab:  {{ activeTab }}" />
        <TabView selectedIndexChanged="onSelectedIndexChanged">
            <TabView.items>
                <TabViewItem title="Tab 1">
                <TabViewItem.view>
                    <StackLayout>
                        <Label text="Label in Tab 1" />
                    </StackLayout>
                </TabViewItem.view>
                </TabViewItem>
                <TabViewItem title="{{ activeTab === 1 ? 'Selected' : 'No Selected' }}">
                <TabViewItem.view>
                    <Label text="Label in Tab 2" />
                </TabViewItem.view>
                </TabViewItem>
            </TabView.items>
        </TabView>
    </StackLayout>
</Page>

MainScreen.ts

import { StackLayout } from 'ui/layouts/stack-layout';
import { NavigatedData } from 'ui/page';

var page;
var observableModule = require("data/observable");
var data = new observableModule.fromObject({activeTab: 3});


exports.onNavigatingTo = function(args)
{
    page = args.object;
    page.bindingContext = data;
};

export function onSelectedIndexChanged(event)
{
    data.activeTab = event.newIndex;
    console.dir(event.newIndex);
}

it is my first time using NativeScript and I will really appreciate the help.


#2

I think that you have reopened this issue on Github? I think that’s the right strategy, and you can follow through there. It could be a regression bug, and if so would go into triage.


#3

Thanks for your reply Jen, I’m not sure if it is a bug or of there is something wrong with my code, I’m just getting started with NativeScript and thought what I’m trying to do sounds like a trivial task, at least on paper… that’t why I would like someone with more experience with the framework to check my code.


#4

hi, just to clarify. I think you’re doing the right thing, and the right place to follow up on what could be a regression bug is on Github. Definitely you can get engineering help there. Thanks!