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を呼ぶことにしましょう。私はjs、cssとxmlファイルを含むフォルダを持っている各タブの

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; 
} 

：それは私はバインディング・コンテキストを定義したmain.jsに関連付けられています。 サンプル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> 

それが動作するはずです