ObservableArrayのデータからCSSクラスを設定する

Question

私は、情報を含む観測可能な配列を持っています。私は動的に配列内のデータに基づいてクラスを変更するために探しています。私が試した：

#js 
var pageData = new Observable({ 
    locations: new ObservableArray([ 
     {location: 'OR1'}, 
     {location: 'OR2'}, 
     {location: 'OR3'}, 
     {location: 'WR1'}, 
     {location: 'PO1'} 
    ]), 
    surgeons: new ObservableArray([ 
     {surgeon: 'Dr. Pepper', selected_text: '', selected_class: ''}, 
     {surgeon: 'Dr. Scholls', selected_text: "\uf111", selected_class: 'font-awesome'} 
    ]) 
    }); 

exports.loaded = function(args) { 
    var page = args.object; 
    page.bindingContext = pageData; 
}; 


#xml 
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo" xmlns:statusBar="nativescript-statusbar" 
    class="green" loaded="loaded"> 
<GridLayout orientation="vertical" columns="*" rows="2*,*,3*,*,5*,*"> 
    <Label text="mrn: 123456" row="0" class="h1" horizontalAlignment="center"/> 
    <Label text="Surgeon" class="h3" row="1"/> 
    <ListView col="0" row="2" items="{{ surgeons }}" separatorColor="#58847D" class="margin-sides-10 rounded-corners-all"> 
     <ListView.itemTemplate> 
      <GridLayout orientation="vertical" columns="75,*" rows="*"> 
       <Label text="{{ selected_text }}" class="{{ selected_class}} black-text" col="0"/> 
       <Label text="{{ surgeon }}" class="black-text" col="1"/> 
      </GridLayout> 
     </ListView.itemTemplate> 
    </ListView> 
    <Label text="Location" class="h3" row="3"/> 
    <ListView col="0" row="4" items="{{ locations }}" separatorColor="#58847D" class="margin-sides-10 rounded-corners-all"> 
     <ListView.itemTemplate> 
      <Label text="{{ location }}" class="black-text"/> 
     </ListView.itemTemplate> 
    </ListView> 

    <Button text="Save" class="dark-grey margin-top-10" row="5" tap="save"/> 

</GridLayout> 

条件付きスタイル個々のコンポーネントへの最善の方法は何ですか？

Answer 1

実際には機能していないのは、XMLに簡単な間違いがあるからです。あなたのXMLは次のようにする必要があります：

<Label text="{{ selected_text }}" class="{{selected_class}}" col="0"/> 

同じ要素プロパティに、観察可能なコードと観察不可能なコードの両方を混在させることはできません。 "black-text"をクラスプロパティに追加すると、 NativeScriptはそれを{{selected_class}}と.black-textという名前のリテラルクラスとして扱いました。