I'm using the built-in ListView and have the following setup.
<ListView items="{{ myItems }}" itemLoading="onItemLoading" itemTemplateSelector="onTemplateSelector">
<ListView.itemTemplates>
<template key="even">
<Label text="{{ age }}" style.backgroundColor="white" />
</template>
<template key="odd">
<Label text="{{ age }}" style.backgroundColor="gray" />
</template>
</ListView.itemTemplates>
During the onLoadingEvent - where each item is about to be loaded, I look at the args.view and it's always undefined. I would have expected it to be the full template view structure - depending on what onTemplateSelector returned.
Looking at some more of the documentation and it seems that if it's undefined then you've got to create the entire structure within code.
Did I miss something? If no, then what's the purpose of allowing the template item definitions (e.g. Label in my sample code).
If you just do
<ListView.itemTemplates>
<Label text="{{ age }}" style.backgroundColor="gray" />
</ListView.itemTemplates>
That will work fine. I'm not sure what your <template> element is.
Related
I am fetching data from an JSON placeholder api
I want to iterate over each response and show it in my list view, however I just can't get it to work. It always just shows the waiting block and never gets to the fetch block.
I am quite new to nativescript as well so any help is appreciated.
{#await posts}
<label text="Waiting"></label>
{:then data}
<listView items="{data}" row="1" colSpan="2">
<Template let:item>
{#each data as item}
<label text="{item.id}. {item.body}" textWrap="true" />
{/each}
</Template>
</listView>
{:catch}
<label text="Error occured"></label>
{/await}
async function fetchPosts() {
let allPosts = await fetch('https://jsonplaceholder.typicode.com/posts');
return await allPosts.json();
}
let posts = fetchPosts();
Your iteration method unifies every item into a huge van. Simply change let:item to let:item={item}.
Code:
...
<Template let:item={item}>
<label text="{item.id}. {item.body}" textWrap="true" />
</Template>
...
I'd like to figure out how to hide the index/result on an empty search query.
In my blade I have the code (slightly modified from the official documentation):
<ais-instant-search index-name="myIndex" :search-client="searchClient">
<ais-search-box placeholder="Search here"></ais-search-box>
<ais-state-results>
<template slot-scope="{ state: { query } }">
<ais-hits v-if="query.length > 0">
<div slot="item" slot-scope="{ item }">
<h2>#{{ item.Title}}</h2>
<p>#{{ item.Text}}</p>
</div>
</ais-hits>
</template>
</ais-state-results>
</ais-instant-search>
If I enter a search query this works fine, but on empty query this displays the following unwanted notification on my page (instead of the before unwanted index):
Use this component to have a different layout based on a certain state.
Fill in the slot, and get access to the following things on the slot-scope:
results: [
"_rawResults",
"hits",
"nbHits",
[..]
How can I hide this notification?
Ah, I just found a solution I think.
This notification text is displayed if there's no DOM element inside <ais-hits>. And in case of no query there isn't, since "v-if" removes that. So If instead of "v-if" I use "v-show" it works as I need it, since the DOM element still exists, but isn't displayed (display:hidden).
<ais-instant-search index-name="myIndex" :search-client="searchClient">
<ais-search-box placeholder="Search here"></ais-search-box>
<ais-state-results>
<template slot-scope="{ state: { query } }">
<ais-hits v-show="query.length > 0">
<div slot="item" slot-scope="{ item }">
<h2>#{{ item.Title}}</h2>
<p>#{{ item.Text}}</p>
</div>
</ais-hits>
</template>
</ais-state-results>
I am learning to make an app in NativeScript (Angular 2). In my item page, I want to have a button so that when I press it, I can change Label into TextView/TextField for editing the information of the item.
I know that I can use editable in TextView but I still want to know if it is feasible to have the button with that functionality. Thank you !!
item.component.html:
<StackLayout>
<Label class="h3" text="Name: {{ item.get_name() }}" textWrap="true">
</Label>
<Label class="h3" text="Credit: {{ item.get_credit() }}"></Label>
<Button class="btn" text="Edit" (tap)="change()"></Button>
</StackLayout>
<!-- After pressing the button -->
<StackLayout>
<TextView class="h3" [text]="item.get_name()" textWrap="true">
</TextView>
<TextView class="h3" [text]="item.get_credit()"></TextView>
<Button class="btn" text="Save" (tap)="change()"></Button>
</StackLayout>
This can be done in many ways, but one common way is by changing visibility of control and binding it to a variable / property in the code behind.
in your component html:
Then on your component ts or code-behind you can handle it in the change method:
class MyComponentSample {
isLabelMode: boolean = true; // Set to true if you want label to show by default or false if TextView as default
change() {
this.isLabelMode = !isLabelMode; // Basically you are toggling the mode here.
}
}
Using NativeScript 3 + Angular 5.
I need to allow the user to swipe an item within a RadListView to reveal a short description about the item.
<RadListView
[items]="featuredVideos"
pullToRefresh="true"
selectionBehavior="None"
(itemSwipeProgressStarted)="onSwipeCellStarted($event)"
swipeActions="true"
(pullToRefreshInitiated)="onPullToRefreshInitiated($event)">
<ng-template tkListItemTemplate let-item="item">
<VideoComponent [video]="item"></VideoComponent>
</ng-template>
<ng-template tkListItemSwipeTemplate let-item="item">
<GridLayout columns="*, 500" class="gridLayoutLayout">
<StackLayout id="short-desc" col="1">
<Label [text]="item.shortDescription" class="body" verticalAlignment="center" horizontalAlignment="center"></Label>
</StackLayout>
</GridLayout>
</ng-template>
</RadListView
I would like to be able to access the current item inside the tkListItemSwipeTemplate so that I can bind the text property of the label to the short description. Currently I am getting the following error
JS: ERROR TypeError: Cannot read property 'shortDescription' of undefined
I know this question is a little old now, but for anyone who comes here looking for an answer, I have managed to work-around this problem. Bind your label text to a different value i.e.:
<Label [text]="myLabelText"...
Then in your onSwipeCellStarted callback, you can use the index property on the ListViewEventData argument and set 'myLabelText' appropriately e.g.:
onSwipeCellStarted(args: ListViewEventData) {
...
this.myLabelText = featuredVideos[args.index].shortDescription;
}
This should get you out of trouble. Hope it helps :)
I have the following structure:
<ScrollView tkMainContent>
<ListView [items]="students$ | async" class="list-group" *ngIf="students$">
<ng-template let-student="item">
<StackLayout>Student details go here</StackLayout>
I'm not able to show a button inside the ScrollView when there is no student in my list.
How can I still show the button?
Note: I'm testing on a real iOS device.
<FlexboxLayout flexDirection="column">
<GridLayout class="page-content" id="placeholderLayout" visibility="{{ hasContent ? 'collapse' : 'visible' }}">
<Label class="page-icon fa" text=""></Label>
<Label class="page-placeholder" style="white-space: normal" text="Click the camera button to add image"></Label>
</GridLayout>
<ScrollView>
<-- List View Here -->
</ScrollView>
</FlexboxLayout>
I use something like this on NS Core, to show placeholder content. The way to set visibility might be different in angular, but a similar markup should work for you.
In the component.ts, you should take care to evaluate if there is content to show in list view, if there are, then set hasContent to true, and false otherwise.
Hope that helps :) let me know if you face any trouble while implementing this.