I have an observable array that contains some info. I'm looking to dynamically change the class based on the data contained within the array. I've tried:
#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>
What is the best way to conditionally style individual components?
Actually the reason it isn't working is because you have a simple mistake in your XML. Your xml needs to be:
<Label text="{{ selected_text }}" class="{{selected_class}}" col="0"/>
You cannot mix both observable code and non observable code in the same element property. By you adding the "black-text" to the class property; then NativeScript would have treated it as a literal class named .{{selected_class}} and .black-text.
Related
At certain point on my xml file i have this:
<GridLayout row="2" rowSpan="2" col="2" rows="*" columns="40,*,40" verticalAlignment="center" horizontalAlignment="right" marginRight="10">
<Label row="0" col="0" text="+" tap="onTapPlus" verticalAlignment="center" horizontalAlignment="center" style="color:black;font-family: 'Allerta Stencil', sans-serif;font-size:20px;"></Label>
<Label id="" row="0" col="1" text="{{nrItemsTakeAway}}" verticalAlignment="center" horizontalAlignment="center" style="color:black;font-family: 'Allerta Stencil', sans-serif;font-size:20px;text-align:center; width:50px;"></Label>
<Label row="0" col="2" text="-" tap="onTapMinus" verticalAlignment="center" horizontalAlignment="center" style="color:black;font-family: 'Allerta Stencil', sans-serif;font-size:20px;"></Label>
</GridLayout>
So when the user taps on the + button, the onTapPlus function is called and the nrItemsTakeAway is suppose to increment...so just for testing, i did this on my onTapPlus function:
function onTapPlus(args) {
const button = args.object;
const page = button.page;
vm.set("nrItemsTakeAway", "4");
page.bindingContext = vm;
but it doesn´t work...it is not binding, what am i missing here?
I have the following code:
private loadSlides(): Promise<any> {
return new Promise((resolve, reject) => {
const component = builder.parse(slideTemplate);
component.bindingContext = {
content: 'HHAHAAHA'
};
resolve(component);
});
}
and this is the value for slideTemplate:
export const slideTemplate: string = `
<GridLayout row="0" rows="*, 2*, *">
<GridLayout width="57%" row="0" horizontalAlignment="center" verticalAlignment="center">
<Label class="lobster-regular carousel-item-head" [text]="content" textWrap="true"></Label>
</GridLayout>
</GridLayout>
`;
Now when I bind the value from my template it only shows empty string.
Why is that so?
You can not use Angular template / binding syntax with builder.parse(...), it's created outside Angular context.
Since you are using bindingContext which is NativeScript Core way of handling data binding, you should use text="{{ content }}"
export const slideTemplate: string = `
<GridLayout row="0" rows="*, 2*, *">
<GridLayout width="57%" row="0" horizontalAlignment="center" verticalAlignment="center">
<Label class="lobster-regular carousel-item-head" text="{{ content }}" textWrap="true"></Label>
</GridLayout>
</GridLayout>
`;
I'm unsure why you may need builder here, I would suggest sticking with Angular components if possible.
# I am using listview inside the Scrollview but listview is not scrollable inside the scrollview as top parent view
component.html
<ScrollView>
<StackLayout class="zindex">
<!--<AutoComplete [items]="ArrayVillage" (itemTap)="itemTapped($event)"> </AutoComplete>-->
<SearchBar row="0" #sb hint="Search for a country and press enter" (clear)="onClear()" [text]="searchPhrase" (submit)="onSubmit(sb.text)"></SearchBar>
<ListView row="1" [items]="myItems" class="list-group">
<template let-item="item">
<GridLayout class="item" class="list-group-item">
<Label [text]="item.name" class="list-group-item-heading"></Label>
</GridLayout>
</template>
</ListView>
</StackLayout>
<ScrollView>
Try Using Repeater instead of ListView as mentioned in https://docs.nativescript.org/cookbook/ui/repeater. Following is an example of how you can include Repeater inside a ScrollView and can obtain whole layout as scrollable.
<ScrollView>
<StackLayout class="margin">
<Label text="{{ description }}"></Label>
<Repeater items="{{ options }}" row="1">
<Repeater.itemTemplate>
<StackLayout>
<Label text="{{ description }}"></Label>
</StackLayout>
</Repeater.itemTemplate>
</Repeater>
</StackLayout>
</ScrollView>
Trying it by wrapping the scrollview into a AbsoluteLayout
<AbsoluteLayout>
<ScrollView>
<StackLayout class="zindex">
//Rest of stuff
</StackLayout>
<ScrollView>
</AbsoluteLayout>
Having a scrollview inside other one is not a good practice. It doesn't work beacuse scrollview tries to calculate the infinite view and do it with a scrollable inside could work just in some cases having control of the parent view, but don't go that painfull way.
In your code I have a question, why would you want to scroll the SearchBar? Try this structure I think is what you want.
<StackLayout>
<SearchBar></SearchBar>
<ListView>
<template>
<GridLayout >
<Label ></Label>
</GridLayout>
</template>
</ListView>
The SearchBar is fixed and the List scrolllable
Look at the video, play with the emulator and you will see that at the beggining it seems to work but is the "computer mouse scroll" when you use click trying to scroll it doesn't work anymore and is because the screen doesn't know which scrollable element has to scroll.
To do 2 scrollable parts can be a solution, as shown in the end of the video (I implemented in Nativescript with Javascript because I'm working in a project but is almost the same)
<StackLayout>
<Label fontSize="20" color="blue" text="You can do two scrollable parts" textWrap="true" />
<Button text="to" />
<ListView items="{{ items }}" height="300" loaded="onLoaded" itemLoading="onItemLoading" itemTap="onItemTap">
<ListView.itemTemplate>
<Label text="{{ name }}" textWrap="true" />
</ListView.itemTemplate>
</ListView>
<ScrollView>
<StackLayout>
<Button text="1" />
<Button text="2" />
<Button text="3" />
<Button text="4" />
<Button text="5" />
<Button text="6" />
<Button text="3" />
<Button text="4" />
<Button text="5" />
<Button text="6" />
</StackLayout>
</ScrollView>
</StackLayout>
I would like to implement a static content in my Page to show some values just before showing the RadListView provided by Telerik. This is my code example:
<lv:RadListView items="{{ dataItems }}" row="1" selectionBehavior="Press" itemSelected="onItemSelected">
<lv:RadListView.listViewLayout>
<lv:ListViewLinearLayout scrollDirection="Vertical"/>
</lv:RadListView.listViewLayout>
<lv:RadListView.itemTemplate>
<StackLayout orientation="vertical">
<Label fontSize="20" text="{{ itemName }}"/>
<Label fontSize="14" text="{{ itemDescription }}"/>
</StackLayout>
</lv:RadListView.itemTemplate>
</lv:RadListView>
I am trying to add a Label just before the RadListView like this:
<StackLayout>
<Label text="Listview Header!!!" />
</StackLayout>
I am trying to make the Label non-scrollable.
Once I change my code, nothing shows up in the page, any idea?
Thanks!
You need one main layout for this route/page. There can only be one child to the page (I know there's no page in NativeScript angular) but try adding a stack then placing what you have inside that one stack and it shouldn't work.
there is no error in console, I've tried many things but cannot understand the actual problem with code. Can anybody help me in this.. and emulator snippets and code below:
home.ts:
enter code here
import {EventData,Observable} from "data/observable";
import {Page} from "ui/page";
var page : Page;
var tempSessions = [
{
id:"0",
title:"session 0"
},{
id:"1",
title:"session 1"
},{
id:"2",
title:"session 2"
}];
export function pageLoaded(args:EventData) {
page = <Page>args.object;
page.bindingContext = new Observable({
sessions:tempSessions
});
}
home.xml:
<Page xmlns="http://schemas.nativescript.org/tns.xsd" load="pageLoaded">
<GridLayout rows="auto,*">
<!--row 0-->
<StackLayout></StackLayout>
<!--row 1-->
<GridLayout rows="auto,*" row="1">
<ListView items="{{ sessions }}">
<ListView.itemTemplate>
<Label text="item"/>
</ListView.itemTemplate>
</ListView>
</GridLayout>
</GridLayout>
</Page>
emulator
I found several issues in your code. The first one is that the page event is called loaded instead load. The second one is that you could use ObservableArray Module, which would auto update the ListView when you push new item in the array. You could review the NativeScript Getting Started Guide
main-page.xml
<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
<GridLayout rows="auto,*">
<!--row 0-->
<StackLayout row="0">
<Label text="sample text" textWrap="true" />
</StackLayout>
<!--row 1-->
<GridLayout rows="*" row="1">
<ListView row="0" items="{{ sessions }}">
<ListView.itemTemplate>
<StackLayout>
<Label text="{{title}}"/>
</StackLayout>
</ListView.itemTemplate>
</ListView>
</GridLayout>
</GridLayout>
</Page>
main-page.ts
import {EventData,Observable} from "data/observable";
import {ObservableArray} from "data/observable-array";
import {Page} from "ui/page";
var page : Page;
var tempSessions = new ObservableArray();
export function pageLoaded(args:EventData) {
tempSessions.push({
id:"0",
title:"session 0"
});
tempSessions.push({
id:"1",
title:"session 1"
});
tempSessions.push({
id:"2",
title:"session 2"
});
page = <Page>args.object;
page.bindingContext = new Observable({
sessions:tempSessions
});
}