no operation cameraRoll

How-to Discussions
1

hi!

Every time I click on the Panel, getImage () is executed to change the picture.

However, the change is made only once in the first place. Not more than two times.

I also want to run it only when I click on the Panel,
However, it runs every time the app is run.
It is executed regardless of clicking the Panel.

Can I get help?

  <DockPanel Dock="Top" Margin="0,30,0,0">
              <Text Dock="Top" Value="Image" Font="FontNanumGothic" FontSize="13" />

              <Circle Dock="Top" Width="60" Height="60">
                  <ImageFill File="{img}" WrapMode="ClampToEdge"/>
              </Circle>

              <Panel Dock="Top" Alignment="Center" Width="100" Height="40" Color="Red">
                  <Text Value="ok" FontSize="11" TextColor="White" Clicked="{cameraRoll}"/>
              </Panel>
          </DockPanel>

var img = Observable('Assets/Images/sidebar_bg.png')
var i = 0

cameraRoll.getImage()
    .then(function (image) {
      console.log('success : ' + image.value)
      img.value = image
    }, function (error) {
      console.log('fail')
    })

module.exports = {
  cameraRoll: cameraRoll.getImage,
  img: img
}
2

Hi operate2v,

sorry for a delayed response.

The cause of issue you’re describing is quite straight-forward. In your JavaScript code, you execute the cameraRoll.getImage() - it’s not a function definition, it is the actual call. So instead your code should look something like this:

var imgPath = Observable("");
function getImage() {
    cameraRoll.getImage()
    .then(function(i) {
      console.log("success : " + JSON.stringify(i));
      imgPath.value = i.path;
    }, function (error) {
      console.log("failed with: " + error.message);
    });
}
module.exports = {
    imgPath: imgPath,
    getImage: getImage
};

and in UX:

<Circle Dock="Top" Width="60" Height="60">
    <ImageFill File="{imgPath}" WrapMode="ClampToEdge" />
</Circle>

<Panel Dock="Top" Alignment="Center" Width="100" Height="40" Color="Red">
    <Clicked>
        <Callback Handler="{getImage}" />
    </Clicked>
    <Text Value="ok" FontSize="11" TextColor="White" />
</Panel>

Hope this helps!