如何在页面中包含分部视图？

Question

我一直在尝试使用nativescript测试部分视图，但似乎无法让页面加载部分视图内容。

下面是我的主容器视图：

<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"/>

正如您所看到的，我排除了tab1.xml中的按钮内容在主页上独立显示的可能性，但只要我执行include语句<t1:tab1 id="tab1" />，就不会显示任何内容。

我在这里做错了什么？

Answer 1

ScrollView可以包含一个单个根元素。在创建自定义组件时也应该考虑同样的做法(很好的博客文章here)。尝试将按钮包装在StackLayout (或其他布局)中的自定义组件中，并对ScrollView的内容执行相同的操作。

Answer 2

​

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>

​