從ObservableArray中的數據設置CSS類

我有一個包含一些信息的可觀察數組。我期望根據數組中包含的數據動態更改類。我已經試過：從ObservableArray中的數據設置CSS類

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

什麼是最好的方式，有條件的風格單個組件？

來源

2016-05-13 DataSwede

其實它不工作的原因是因爲你的XML有一個簡單的錯誤。你的XML必須是：

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

你不能在同一個元素屬性混合使用這兩個觀察的代碼和非可觀察的代碼。通過將「黑色文本」添加到類屬性中;那麼NativeScript會將其視爲一個名爲{{selected_class}}和.black-text的文字類。

來源

2016-05-13 21:26:14 Nathanael

啊，有趣。錯誤信息有點神祕。鑑於你不能混合，改變可能有幾個CSS類的給定組件的樣式的最佳策略是什麼？你將如何做jQuery的nativescript中的等價物：$（）。removeClass（）。addClass（）？ – DataSwede

嗯，我實際上已經寫了一個名爲NativeScript-Dom的酷插件，它提供了element.classList.add，刪除，切換等。社區插件列表位於http://plugins.nativescript.rocks – Nathanael

從ObservableArray中的數據設置CSS類

回答

相關問題