我有一个包含一些信息的可观察数组 . 我希望根据数组中包含的数据动态更改类 . 我试过了：
#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>
有条件地设计单个组件的最佳方法是什么？
1 回答
实际上它不起作用的原因是因为你的XML中有一个简单的错误 . 你的xml需要是：
您不能在同一元素属性中混合使用可观察代码和不可观察代码 . 通过向类属性添加“黑色文本”;然后NativeScript会将其视为名为 . {}和.black-text的文字类 .