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中的可见性绑定中的绑定上下文开始在currentActive中查找profileBinding属性。为了实现您想要的功能，您必须将选项卡XML包装在另一个布局中，如下所示：

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

它应该按预期工作。

NativeScript绑定会破坏UI

1 个答案: