uioporqwerty
uioporqwerty

Reputation: 1158

How to include Partial Views in a page?

I've been trying to test partial views with nativescript but I cannot seem to get the page to load the partial view content.

Here is my main container view:

<Page id="tabsPage" class="page" xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:t1="views/tab-test/partial-views/tab1">
    <ScrollView>
    <Button class="btn btn-primary" text="test button"/>
<Button tap="GoToTab2" text="Go To Tab 2"/> 
    <!-- <SegmentedBar selectedIndex="0" selectedIndexChanged="segBarSelected">
        <SegmentedBar.items>
            <SegmentedBarItem title="Tab 1" />
        </SegmentedBar.items>
    </SegmentedBar> -->

        <t1:tab1 id="tab1" />
    </ScrollView>
</Page>

tab1.xml

<Button class="btn btn-primary" text="test button"/>
<Button tap="GoToTab2" text="Go To Tab 2"/>

As you can see I ruled out that the button content in tab1.xml displays independently on the main page but as soon as I do the include statement <t1:tab1 id="tab1" />, nothing displays.

What am I doing wrong here?

Upvotes: 0

Views: 238

Answers (2)

sinan buğan
sinan buğan

Reputation: 1

tab1.js
----------

function onLoad(args) {

    var container = args.object;
    container.bindingContext = container;
}
<Page id="tabsPage" class="page" xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:t1="views/tab-test/partial-views">


tab1.xml
----------
<GridLayout columns="80,*,80" rows="100" style="background:#fff;opacity:0.95;padding:10 10;margin-bottom:20" loaded="onLoad">
  
<Button class="btn btn-primary" text="test button"/>
<Button tap="GoToTab2" text="Go To Tab 2"/>
</GridLayout>

Upvotes: 0

Nick Iliev
Nick Iliev

Reputation: 9670

The ScrollView can contain a single root element. The same practice should be considered when creating your custom components (nice blog post here). Try wrapping the buttons in your custom component in StackLayout (or another layout) and do the same for the content of your ScrollView.

Upvotes: 1

Related Questions