NativeScript 绑定破坏了 UI答案

【问题标题】：NativeScript binding breaks UINativeScript 绑定破坏了 UI
【发布时间】：2016-06-22 18:51:12
【问题描述】：

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

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>

一切都按预期工作，但是如果我尝试将堆栈布局绑定到 object ，所有 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
}

这是什么原因造成的？可能不支持多级绑定？

【问题讨论】：

标签： nativescript

【解决方案1】：

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

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

它应该会按预期工作。

【讨论】：