CSS-Klasse aus Daten in ObservableArray setzen

Question

Ich habe ein beobachtbares Array, das einige Informationen enthält. Ich möchte die Klasse basierend auf den im Array enthaltenen Daten dynamisch ändern. Ich habe versucht:

#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> 

Was ist der beste Weg, um bedingt Stil einzelne Komponenten?

Answer 1

Eigentlich ist der Grund, warum es nicht funktioniert, weil Sie einen einfachen Fehler in Ihrem XML haben. Ihr xml muss sein:

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

Sie können nicht beide beobachtbaren Code und nicht beobachtbaren Code in der gleichen Elementeigenschaft mischen. Indem Sie der Klasseneigenschaft den "black-text" hinzufügen; dann hätte NativeScript es als eine literale Klasse namens {{selected_class}} und .black-text behandelt.