NativeScript绑定中断UI

Question

我已经设置了一个自定义选项卡视图，定义如下：

main.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="loaded" 
xmlns:t1="partial-views/explore"
xmlns:t2="partial-views/community">
<!--ACTION BAR-->
<ActionBar title="Haloose">...</ActionBar>
<StackLayout>
    <!-- TABS -->
    <StackLayout id="sl_main">
        <t1:explore     id="tab_explore"    visibility="{{ currentActive == 'explore' ? 'visible' : 'collapsed' }}" />
        <t2:community   id="tab_community"  visibility="{{ currentActive == 'community' ? 'visible' : 'collapsed' }}"/>
    </StackLayout>
    <-- FIXED MENU -->
    <GridLayout id="menu">
        <Image  tap="changeVisibleTab"/>
        <Image tap="changeVisibleTab" />
    </GridLayout>
</StackLayout>
</Page>

让我们把这个文件称为main.xml。它与main.js相关联，其中我定义了一个绑定上下文：

main.js

exports.loaded = function(args){
    page = args.object;

    //Set Up page view model
    mainObservable = new Observable({
        currentActive:"explore",
        menuItemsArray:[
            new MenuItem("explore"),
            new MenuItem("community")
        ]
    });
    //Bind page to view model
    page.bindingContext = mainObservable;
}

对于每个选项卡，我都有一个包含js、css和xml文件的文件夹。示例tab.xml文件如下所示：

tab.xml

<StackLayout loaded="tabLoaded" > <looots of stuff /> </StackLayout>

所有东西都像预期的那样工作，但是如果我试图将堆栈布局绑定到一个对象，那么所有的UI元素都是隐藏的。如果我删除绑定，我可以再次看到它们。

不工作的tab.js

var Observable = require("data/observable").Observable;

var profile;
exports.tabLoaded = function(args){
    profile = args.object;
    var profileBinding = {
        username : "Aaron Ullal"
    }
    profile.bindingContext = profileBinding; //removing this line makes elements visible
}

是什么引起的？也许不支持多级绑定？

Answer 1

当您使用自定义XML组件(如选项卡)并向它们添加绑定(在您的示例中是visibility绑定)时，这些绑定基本上应用于XML组件中的根标记。因此，当您在tab.js中更改绑定上下文时，可见性绑定将开始在profileBinding中寻找一个currentActive属性。为了实现您想要的结果，您必须将选项卡XML封装在另一个布局中，如下所示：

<StackLayout>
    <StackLayout loaded="tabLoaded" > 
        <!--looots of stuff --> 
    </StackLayout>
</StackLayout>

它应该会像预期的那样起作用。