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 元素都会被隐藏。如果我删除绑定，我可以再次看到它们。

not working 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>

它应该会按预期工作。

NativeScript 绑定中断 UI

NativeScript binding breaks UI

nativescript