Changing image file dinamically inside a class

How-to Discussions
1

Hi,

i want to create a image selector and i can’t make it work as a class.

This is working (no class):

UX:

<Panel Height="80" Width="80">
    <Clicked Handler="{onSelectPicture}"/>
    <Image File="{image}" Width="80" Height="80" StretchMode="UniformToFill"/>
    <Image File="defaultNoImage.png" Width="80" Height="80" StretchMode="UniformToFill"/>
</Panel>

js:

image = Observable();
function onSelectPicture(){
image.value = "myPicture.png";
}

when i try to convert it to a class it does not work:

UX:

<Panel ux:Class="PictureSelector" Height="80" Width="80">
    <Clicked Handler="{clicked}"/>
    <Image File="{image}" Width="80" Height="80" StretchMode="UniformToFill"/>
</Panel>

<Each Items="{selectorsList}">
    <PictureSelector/>
</Each>

js:

 function PictureSelector(file) {
this.image = Observable(file),

this.clicked = function() {
	console.log("clicked!"); // <-- it shows the message
	this.image.value = "myPicture.png";
}.bind(this)
 }

 selectorsList.add(new PictureSelector("defaultFile.png"));

if i add some text (like the file name) the text changes but not the image… any help would be apreciated

2

It seems now it’s working (no idea why :slight_smile: ) i guess i had some error or it was a preview error.