JS in multiple files

[Fotis]

Hello,

inside my mainview.ux i have

<Each Items="{movieList}">
    <MovieCard />
</Each>

where movieCard is another ux file. movieList is a js observable from mainview.js. Inside MovieCard i tried to use another JS (including the file as follows )

<JavaScript File="MovieCards.js" ux:Global="mainview"/>

and inside (movieCards.js) i have a function that changes the visibility and height of a panel. I tried calling it with

<Circle Color="Black" Width="15" Height="15" Row="0" Column="3" >
    <Clicked Handler="{click}"/>
</Circle>

which is inside movieCards.ux but it doesnt seem to work. I put a console.log() inside the function but it doesnt print. Any thoughts ?

This is my MovieCard JS file :

var Observable = require('FuseJS/Observable');

var panelVisibility = Observable("Hidden");
var height = Observable("0");

function click(args)
{
    console.log(">>>> ???? <<<<<");
    if(panelVisibility.value == "Visible")
    {
        panelVisibility.value = "Hidden";
        height.value = "0"
    } else {
        panelVisibility.value = "Visible"
        height.value = "94%"
    }
}

module.exports = {
    panelVisibility : panelVisibility,
    height : height,
    click : click
};

[eivind.teig]

first thougth is that you did not export the click function to mainview.ux from a file or tag.

[Fotis]

function click is inside movieCards.js and is called inside movieCards.ux not in mainview.ux if i understood correctly what you said. So how am i going to export it on mainview.ux ?

[eivind.teig]

oh, it did not say so. What i ment was that you should have the click function in your mainview.js file, but i think i migth have missunderstood your post, i will try to read it again

maybe you have a test project with this not working i could look at?

[Fotis]

I re-edited the post so to avoid any further misunderstandings. Sorry i don’t have a test project to send only the code i post it

[Anders_Bondehagen]

Are you sure MovieCards.js run at all?

Add a console.log at the top to check. You should also remove ux:Global="mainview" from your JavaScript tag.

You are not showing us all your code, so I not able to give you a correct answer, but from what I can see you should include your MovieCards.js in your parent UX file. But that is a bit hard to tell since I don’t know where you use panelVisibility.

[Fotis]

This is the MainView.ux

<App>
    <JavaScript File="mainview.js" />
    <!-- other code -->

    <Each Items="{movieList}">
        <MovieCard />
    </Each>
</App>

MovieCards.ux

<DockPanel ux:Class="MovieCard" ux:Name="self" Opacity="0.4">
    <JavaScript File="MovieCards.js"/>
    <!-- Other code -->

   <Panel ux:Name="infoPanel" Width="100%" Height="{height}" Visibility="{panelVisibility}" Opacity="0"  Alignment="Bottom">
        <Scaling ux:Name="infoPanelScaling" Y="0" X="0" />
        <Rectangle Color="Red" Width="100%" Height="100%">
            <Text TextColor="#fff" TextAlignment = "Center" Alignment="Center" >I'm Looking For :</Text>
            <Button Clicked="{click}" />
        </Rectangle>
    </Panel>
</DockPanel>

MovieCards.js

var Observable = require('FuseJS/Observable');

var panelVisibility = Observable("Hidden");
var height = Observable("0");

console.log("is it in ?");

function click()
{
    console.log(">>>> ???? <<<<<");
    if(panelVisibility.value == "Visible")
    {
        panelVisibility.value = "Hidden";
        height.value = "0"
    } else {
        panelVisibility.value = "Visible"
        height.value = "94%"
    }
}

module.exports = {
    panelVisibility : panelVisibility,
    height : height,
    click : click
};

if i have it like this the first log that i have inside MovieCards.js is not printed at all. Moreover if i dont use ux:Global=“MainView” the movie cards i have doesn’t take the necessary info from the mainView.js. If i move the

<JavaScript File="MovieCards.js"/>

inside the mainview then mainview.js doesn’t work. Also tried to merge the two js files but with no luck.

[Anders_Bondehagen]

I just tested your code and it works as expected here here. It prints out the following when I click the items.

is it in ?
>>>> ???? <<<<<
>>>> ???? <<<<<

[Fotis]

If i run the above code it prints but as i said i am losing all the info i have from the mainview.js. Because inside the MovieCards.ux i am using info that i have stored in observables in mainview.js. If i include the ux:Global the info are ok again but when i press the button it doesn’t do anything.

It should be like this :

in the second pic if i press the black dot which is a button and it calls the {click} function it doesn’t do anything.

[Anders_Bondehagen]

It doesn’t work because you are using ux:Global (that is deprecated). When you create a new <JavaScript> tag you overwrite the datacontext of the previous tag.

You can move your code to mainview.js and check the argument to click(arg) which panel you clicked.

[Fotis]

yes it worked as you said thank you very much! Didn’t know that ux:global was depricated so i was trying to fix it using that… Thnaks again!