If I try to create conditions in my v-template like if="transaction.id == 604" I get the following error:
>System.err: Calling js method getView failed
System.err:
System.err: TypeError: Cannot read property 'scopedFn' of undefined
If I set it to if="transaction.id" it works fine. transaction.id exists and it has a value of 604.
<ListView for="transaction in transactions" itemTap="onItemTap" height="80%" >
<v-template if="transaction.id">
<StackLayout>
<Label :text="transaction.id" className="placeName" />
<Label :text="transaction.amounttxt" className="placeName" />
<Label :text="transaction.insight_text" className="placeName" />
</StackLayout>
</v-template>
</ListView>
You have only one template with an if condition. There is no fallback template when the if condition fails. There should at least one template without if so it can be used when all your if conditions on other templates fail. Or at least one of you if should pass.
If you want to ignore any list item from being rendered, you should filter the array (transactions) itself.
Related
I am having issues with GridLayout losing their column sizing inside a TabView whenever I go to another tab below the current index
An example is below where I am navigating from the 'Freaks' tab to the 'Legends' tab before it and the items inside the GridLayout lose their column position. All of them seem to revert back to column 0'. Both of the tabs uses the same component with only the data being passed as props being different.
Original GridLayout column position in 'Freaks' tab
GridLayout in 'Legends' tab losing column specifications
Gridlayout code would be
<GridLayout columns="40, *, auto" class="w-100 py-7 border-bottom-light" #longPress="optionsOpened">
<TImage :col="0" :src="image" class="w-40 h-40 round" />
<StackLayout :col="1" class="px-20" verticalAlignment="center">
<Label class="text-13" :text="`${data.attributes.first_name} ${data.attributes.last_name}`" textWrap="true" />
<Label v-if="role" class="text-11 text-grey text-capitalize" :text="data.attributes.jersey_number ? `#${data.attributes.jersey_number} ${role}` : role" />
</StackLayout>
<template v-if="!hide_action">
<StackLayout class="action-container" :col="2" orientation="horizontal">
<ActionTile class="at" :text="0xf00c" :is_icon="true" v-if="data.attributes.available == true" #tap.native="markAvailability(!data.attributes.available)" />
<ActionTile class="at" color="red" :text="0xf00d" :is_icon="true" v-if="data.attributes.available == false" #tap.native="markAvailability(!data.attributes.available)" />
</StackLayout>
</template>
</GridLayout>
Has anyone encountered a similar issue? If so, what was your fix? Any help would be much appreciated.
I am trying to test and example with MasterDetail. You can see the code in:
https://github.com/jrariasf/MD8/tree/master/MD8
The Master have 5 buttons to access to 4 detail pages (Home, MainPage, ViewA, ViewB and ViewC).
From ViewA, with 2 buttons I am able to load ViewB and ViewC
But I am not able to do that pushing a button in hambubrger menu then load the detail page adequated.
It only works if I put an absolute path in the CommandParameter in "PrismMasterDetailPage.xaml":
<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:prism="http://prismlibrary.com"
prism:ViewModelLocator.AutowireViewModel="True"
x:Class="MD8.Views.PrismMasterDetailPage">
<MasterDetailPage.Master>
<ContentPage Title="Menu">
<StackLayout Padding="20">
<!-- TODO: // Update the Layout and add some real menu items -->
<Button Text="Home" Command="{Binding NavigateCommand}" CommandParameter="/PrismMasterDetailPage/NavigationPage/ViewA" />
<Button Text="MainPage" Command="{Binding NavigateCommand}" CommandParameter="/NavigationPage/MainPage" />
<Button Text="ViewA" Command="{Binding NavigateCommand}" CommandParameter="../ViewA" />
<Button Text="ViewB" Command="{Binding NavigateCommand}" CommandParameter="./ViewB" />
<Button Text="ViewC" Command="{Binding NavigateCommand}" CommandParameter="ViewC" />
</StackLayout>
</ContentPage>
</MasterDetailPage.Master>
</MasterDetailPage>
Then, in "PrismMasterDetailPageViewModel.cs"
void ExecuteCommandName(string page)
{
Console.WriteLine("PrismMasterDetailPageViewModel - ExecuteCommandName() Vamos a {0}", page);
_navigationService.NavigateAsync(page);
}
If I am in "/PrismMasterDetailPage/NavigationPage/ViewA", what I have to do to unload ViewA and load ViewB ?
For example, in App.xaml.cs the code is:
await NavigationService.NavigateAsync("PrismMasterDetailPage/NavigationPage/ViewA");
Then, execute the app on android emulator, push buttons of hamburger menu and the result it is not as I expected.
Pressing Home button, the _navigationService.GetNavigationUriPath() returns: /PrismMasterDetailPage/NavigationPage/ViewA/NavigationPage?useModalNavigation=true/ViewA
why?
If I press button ViewA or ViewB or ViewC, it don't show anything. But the OnNavigatedFrom() method is called on each View*ViewModel.cs
What is wrong?
Thanks!!
One fo the first things you need to do is understand where you are Navigating from. Navigation in Xamarin.Forms is very dependent on where you are Navigating from. Remember that without Prism you would do something like this:
var mdp = new MyMasterDetailPage
{
Detail = new NavigationPage(new ViewA)
};
In order to achieve a Hamburger Menu with Prism you typically would want a MasterDetailPage as the Application's Main Page. The next segment in the Navigation Uri must be a NavigationPage and the following page would generally be a ContentPage.
<Button Text="Home"
Command="{Binding NavigateCommand}"
CommandParameter="/PrismMasterDetailPage/NavigationPage/ViewA" />
Ok so looking at this first one, this is generally what you would use when navigating from the PrismApplication which is why it works.
<Button Text="MainPage"
Command="{Binding NavigateCommand}"
CommandParameter="/NavigationPage/MainPage" />
Looking at this one, this is really close to what you do want except you are doing an absolute navigation which means that you are resetting the Application.MainPage. What you actually need is a relative Uri because you are navigating from the MasterDetailPage.
<Button Text="ViewA"
Command="{Binding NavigateCommand}"
CommandParameter="../ViewA" />
This is completely wrong because ../{path} is only supported from within a NavigationPage and you are in a MasterDetailPage...
<Button Text="ViewB"
Command="{Binding NavigateCommand}"
CommandParameter="./ViewB" />
This is just not supported by Prism at all.
<Button Text="ViewC"
Command="{Binding NavigateCommand}"
CommandParameter="ViewC" />
This is setting the MasterDetailPage.Detail like:
mdp.Detail = new ViewC()
Of course as I mentioned above you need it to be
mdp.Detail = new NavigationPage(new ViewC());
Thanks a lot Dan Siegel ! (#Dan S.)
I have just seen your comment, a month ago, sorry.
I was a newbie in C# and Xamarin and Prism and I am still a newbie but less :-)
I have learnt and tested a lot in the last weeks and I understand better the concepts.
After reading you I know that ../{path} is only valid with a NavigationPage .
Futhermore, one problem I had was thar I was checking the value of "_navigationService.GetNavigationUriPath()" inside OnNavigatedTo method and as I read later, at that moment the UriPath is not the real final UriPath.
In my code I wrote:
public void OnNavigatedTo(INavigationParameters parameters)
{
Console.WriteLine("DEBUG - ViewAVM: We are in {0}",
_navigationService.GetNavigationUriPath());
}
I moved the GetNavigationUriPath() call to another method and the results were as I expected.
Thanks!!
I'm unable get showModal to pass context through a frame to the default page. Also, showingModally does not seem to fire when modal is loaded (I guess args from showingModally should pass context?).
I've tried the example provided on https://docs.nativescript.org/ui/modal-view under Custom Actionbar, because I need the modal to load within a frame. The modal opens and closes fine, but showingModally in the modal XML does not seem to run.
home/home-page.js
const modalView = "home/modal-root";
function openModal(args) {
console.log('Opens modal');
const mainpage = args.object.page;
const context = "some context";
mainpage.showModal(modalView, context, () => {
console.log('Modal closed');
}, true);
}
exports.openModal = openModal;
home/home-page.xml
<Page xmlns="http://www.nativescript.org/tns.xsd">
<Page.actionBar>
<ActionBar title="Modal view Navigation" />
</Page.actionBar>
<GridLayout rows="auto, *">
<Button text="Open modal" tap="openModal" textWrap="true" />
</GridLayout>
</Page>
home/modal-root.xml
<Frame defaultPage="home/modal-view-page" />
home/modal-view-page.js
function onShowingModally(args) {
console.log("onShowingModally");
}
exports.onShowingModally = onShowingModally;
function onCloseModal(args) {
args.object.closeModal();
}
exports.onCloseModal = onCloseModal;
home/modal-view-page.xml
<Page backgroundColor="green" showingModally="onShowingModally">
<Page.actionBar>
<ActionBar backgroundColor="red" title="Modal view" icon="">
</ActionBar>
</Page.actionBar>
<StackLayout backgroundColor="lightGreen">
<Label text="Modal view with ActionBar" style="text-align:center;" textWrap="true" />
<Button text="Close Modal" tap="onCloseModal" />
</StackLayout>
</Page>
I've added the example to https://play.nativescript.org/?template=play-js&id=lFxTi4&v=9
with console logging.
Console show "Opens modal" on open and "Modal closed" on close as expected (from home/home-page.js), but "onShowingModally" (home/modal-view-page.js) nevers shows in console.
I think the docs need to be fixed. When you have the Frame being shown modally, the event will be called on the Frame not on the page within. If you are showing a simple view instead of Frame, then the event should be called on the view, basically whatever is the root view for your modal and in your example it's the Frame.
Updated Playground
I'm new in Nativescript.And how I call javascript function when binding? I try try like method below, but get empty result.
<Repeater items="{{ Match }}">
<Repeater.itemTemplate>
<StackLayout>
<Label text="{{ SubStringMatch(MatchNo) }}" />
<Label text="{{ DateTime }}" />
</StackLayout>
</Repeater.itemTemplate>
</Repeater>
function SubStringMatch(value) {
return value.substring(1);
}
exports.SubStringMatch= SubStringMatch;
From the code you posted, I believe, you are trying to convert a number value into a string. This could be achieved by using a converter function. You can read more about it in {N} documentation.
I have a long list selector and i have a datatemplate as item template, containing an image. I want the source to change based on a property from the model. I tried with a converter but i could't get it to work.
Now i'm trying with triggers. I have:
<Image Name="MovieThumbnail">
<i:Interaction.Triggers>
<ei:DataTrigger Binding="{Binding DataContext.IsCategoryCurrent,ElementName=LayoutRoot}" Value="true">
<ei:ChangePropertyAction TargetObject="{Binding ElementName=MovieThumbnail}" TargetName="Source" Value="{Binding Path=Image120x170}" PropertyName="Source"/>
</ei:DataTrigger>
<ei:DataTrigger Binding="{Binding DataContext.IsCategoryCurrent,ElementName=LayoutRoot}" Value="false">
<ei:ChangePropertyAction TargetObject="{Binding ElementName=MovieThumbnail}" TargetName="Source" Value="{x:Null}" PropertyName="Source"/>
</ei:DataTrigger>
</i:Interaction.Triggers>
</Image>
It work almost how i want it to, except that images repeat themselves. As in a movie has the picture of another movie. I think it's because i bind by element name and the image control has multiple instances (one for each item), but i would think they can't see each other. Any help highly appreciated.
EDIT:
After further investigation, it seems that this happens because of the long list selector.
I first load 40 items, and then load another 40, but the second batch of 40 items get the pictures from the first batch. If i raise a property changed event, then the pictures from the second batch are set on all items repeating themselves. I have no idea why this is happening.
If i load another 40 and raise property changed on IsCategoryCurrent again, the pictures from the 3rd batch get set 3 times.
I managed to fix it:
<Image
Grid.RowSpan="2"
Name="MovieThumbnail"
Stretch="Fill"
Width="130" Height="195"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<i:Interaction.Triggers>
<ei:DataTrigger Binding="{Binding DataContext.IsCategoryCurrent,ElementName=LayoutRoot}"
Value="true">
<ei:ChangePropertyAction TargetObject="{Binding ElementName=MovieThumbnail}"
TargetName="Source"
PropertyName="Source">
<ei:ChangePropertyAction.Value>
<BitmapImage CreateOptions="BackgroundCreation"
UriSource="{Binding Path=Image120x170}"/>
</ei:ChangePropertyAction.Value>
</ei:ChangePropertyAction>
</ei:DataTrigger>
<ei:DataTrigger Binding="{Binding DataContext.IsCategoryCurrent,ElementName=LayoutRoot}"
Value="false">
<ei:ChangePropertyAction TargetObject="{Binding ElementName=MovieThumbnail}"
TargetName="Source"
Value="{x:Null}"
PropertyName="Source"/>
</ei:DataTrigger>
</i:Interaction.Triggers>
</Image>
And i raise a property changed event of IsCategoryCurrent at every change.