Hi guys. I try to create an app that pick up datas from Youtube (with REST API) and insert into an Observable. When I try to click “Scopri di più” Text, the application can’t send any data to the other page. I don’t know what I have to do.
This Is the code.
Please post a complete, minimal reproduction that we could just copy-paste and run. It’s impossible to tell you what’s wrong by just looking at these 3 random source files.
<App>
<Router ux:Name="router" />
<Navigator DefaultPath="PaginaHome">
<Page ux:Template="PaginaHome">
<Router/>
<JavaScript>
let Observable = require("FuseJS/Observable");
let InterApp = require("FuseJS/InterApp");
let channel_list = Observable();
channel_list.add({
'titolo':"Quei Due Sul Server",
"id_canale":"UC_eA572lBzVkpXhoeWnqSKQ",
});
channel_list.add({
'titolo':"Quei Due Sul Server 2",
"id_canale":"UC5GSO2hiHevgZUhSQIJNd2A",
});channel_list.add({
'titolo':"QDSS Live",
"id_canale":"UC7mru_iFtYCoDilRi3OvqmQ",
});channel_list.add({
'titolo':"I rognosi",
"id_canale":"UCmVlQTe0PeiNNHD-wAeC8vQ",
});channel_list.add({
'titolo':"Cose dell'altro cinema",
"id_canale":"UCYFgn8_JgaQL1E-N2tg1xcQ",
});channel_list.add({
'titolo':"Tutto Sbagliato",
"id_canale":"UCDy4cREE4oBF7EhoW0wnS-g",
});
function goToYoutube(args) {
var video = args.data;
InterApp.launchUri(video.link);
}
function ApriListaCompleta(args){
let obj = { data: args.data.id_canale};
router.push("ListaCompletaVideo", obj);
}
module.exports = {
goToYoutube: goToYoutube,
lista_canali:channel_list,
ApriListaCompleta:ApriListaCompleta
}
</JavaScript>
<ClientPanel>
<Panel>
<ScrollView SnapMaxTransform="false" SnapMinTransform="false">
<StackPanel ux:Name="AnteprimaCanali">
<Each Items="{lista_canali}">
<Rectangle Margin="10">
<DockPanel Margin="10">
<Text Alignment="TopLeft"> {titolo}</Text>
<Text Alignment="TopRight" Clicked="{ApriListaCompleta}"> Scopri di più</Text>
</DockPanel>
</Rectangle>
</Each>
</StackPanel>
</ScrollView>
</Panel>
</ClientPanel>
</Page>
<Page ux:Template="ListaCompletaVideo">
<Router />
<JavaScript>
let Observable = require("FuseJS/Observable");
let InterApp = require("FuseJS/InterApp");
let idCanale = this.Parameter.map(function(x){return x;});
let lista_video = Observable();
console.log(JSON.stringify(idCanale));
function VaiIndietro(){
router.goBack();
}
module.exports = {
id_canale:idCanale
}
</JavaScript>
<ScrollView>
<Panel Alignment="Center">
<Text Alignment="Center" Value="{id_canale}" />
</Panel>
</ScrollView>
</Page>
</Navigator>
</App>
Thanks for the reproduction.
There are several issues with the code, and I have added a working version of it at the end of this post.
-
First, you only need a single
Router. Why did you add aRouteron all of your pages? The same router instance can be passed to child components by using ux:Dependency. -
Why are you doing the following?
let idCanale = this.Parameter.map(function(x){return x;});
let lista_video = Observable();
console.log(JSON.stringify(idCanale));
idCanale is populated asynchronously, and you can not expect it to have a value in that imperative code of yours. Read more about State observables and derived observables to understand how reactive programming applies here.
- When you write
JavaScriptdirectly in aux:Template, it does not really do what you think it would. You need to put your pages inux:Classdefinitions, which will ensure that a new, proper instance of that template is spawned (along with its JavaScript data context) when you navigate to it. That is what makesthis.Parameterwork correctly.
Here’s that working code:
<App>
<Router ux:Name="router" />
<Navigator DefaultPath="PaginaHome">
<Page ux:Template="PaginaHome">
<JavaScript>
let Observable = require("FuseJS/Observable");
let InterApp = require("FuseJS/InterApp");
let channel_list = Observable();
channel_list.add({
'titolo':"Quei Due Sul Server",
"id_canale":"UC_eA572lBzVkpXhoeWnqSKQ",
});
channel_list.add({
'titolo':"Quei Due Sul Server 2",
"id_canale":"UC5GSO2hiHevgZUhSQIJNd2A",
});channel_list.add({
'titolo':"QDSS Live",
"id_canale":"UC7mru_iFtYCoDilRi3OvqmQ",
});channel_list.add({
'titolo':"I rognosi",
"id_canale":"UCmVlQTe0PeiNNHD-wAeC8vQ",
});channel_list.add({
'titolo':"Cose dell'altro cinema",
"id_canale":"UCYFgn8_JgaQL1E-N2tg1xcQ",
});channel_list.add({
'titolo':"Tutto Sbagliato",
"id_canale":"UCDy4cREE4oBF7EhoW0wnS-g",
});
function goToYoutube(args) {
var video = args.data;
InterApp.launchUri(video.link);
}
function ApriListaCompleta(args){
let obj = { data: args.data.id_canale};
console.log("going to the second page with: " + JSON.stringify(obj));
router.push("ListaCompletaVideo", obj);
}
module.exports = {
goToYoutube: goToYoutube,
lista_canali:channel_list,
ApriListaCompleta:ApriListaCompleta
}
</JavaScript>
<ClientPanel>
<Panel>
<ScrollView SnapMaxTransform="false" SnapMinTransform="false">
<StackPanel ux:Name="AnteprimaCanali">
<Each Items="{lista_canali}">
<Rectangle Margin="10">
<DockPanel Margin="10">
<Text Alignment="TopLeft"> {titolo}</Text>
<Text Alignment="TopRight" Clicked="{ApriListaCompleta}"> Scopri di più</Text>
</DockPanel>
</Rectangle>
</Each>
</StackPanel>
</ScrollView>
</Panel>
</ClientPanel>
</Page>
<LCV ux:Template="ListaCompletaVideo" router="router" />
</Navigator>
<Page ux:Class="LCV">
<Router ux:Dependency="router" />
<JavaScript>
let Observable = require("FuseJS/Observable");
let InterApp = require("FuseJS/InterApp");
let idCanale = this.Parameter.map(function(x){
console.log("idCanale is now: " + JSON.stringify(x));
return x.data;
});
let lista_video = Observable();
// console.log(JSON.stringify(idCanale));
function VaiIndietro(){
router.goBack();
}
module.exports = {
id_canale:idCanale
}
</JavaScript>
<Text Alignment="Center" Value="{id_canale}" />
</Page>
</App>