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"/>

您不能在同一元素属性中混合使用可观察代码和不可观察代码。通过添加＆＃34;黑色文本＆＃34;属于阶级财产;然后NativeScript会将其视为名为。{{selected_class}}和.black-text的文字类。

从ObservableArray中的数据设置CSS类

1 个答案: