Observable not updating?

Bug Reports
1

I’m using an observable to update the title of a modal window.

But for some reason it does not work.

The modal:

	<Panel ux:Name="dialog" Alignment="VerticalCenter" Margin="20" Padding="20,10,20,0" Opacity="0">
		<Rectangle Layer="Background" Fill="#fff" CornerRadius="10" Opacity="1" />
		<StackPanel>
			<Text Alignment="Center" FontSize="18" TextWrapping="Wrap" TextAlignment="Center" Value="{TalkTitle}" />
			<Button Text="Close" Margin="0,20,0,0" Padding="10,10,10,50" Clicked="{closeDialog}" HitTestMode="LocalBoundsAndChildren">
			</Button>
		</StackPanel>
		<WhileFalse Value="{isDialogShowing}">
			<Move Y="13" RelativeTo="Size" Duration="0.6" Easing="BackIn" />
			<Scale Factor="0.8" Duration=".6" Easing="BackIn" />
		</WhileFalse>
		<DropShadow />
	</Panel>
	<WhileTrue Value="{isDialogShowing}">
		<Change dialog.Opacity="1" Duration=".3" Easing="QuadraticInOut" />
	</WhileTrue>

The JS code:

var Observable = require("FuseJS/Observable");
var isDialogShowing = Observable(true);
var Locations = Observable();
var TalkLocation = Observable();
var TalkArr = Observable([]);

GeoLocation.on("changed", function(loc){
   Locations.forEach(function(place){
	loccations.forEach(function(place){
			if (!TalkArr.value.includes(place)){TalkArr.value.push(place)}
			TalkLocation = TalkArr.value[0];
			TalkTitle = TalkLocation.Title;
			console.log('DING DING DING DiiIIING!');
			console.log(TalkLocation.Title);
...

	module.exports = {
		isDialogShowing: isDialogShowing,
		closeDialog: closeDialog,
		openDialog: openDialog,
		tours: Tours,
		locations: Locations,
		mapLocation: mapLocation,
		locClick: locClick,
		TalkTitle: TalkTitle,
        onMarkerTapped : function(args) {
            console.log("Marker tapped: "+args.data.Title);
        }		
	}

Now, console.log reveals that it’s getting the value for TalkLocation.Title just fine:

[Phone]: DING DING DING DiiIIING!
[Phone]: The fresh bagel store

However, the modal title is not updated:
Modal with no title

But this is how it should look like:
Modal with manual title added

Please advise.
From the console log, this should work, so I’m confused.

2

We really need to see complete, ready-to-run, copy-pasteable reproductions to provide meaningful support. Without one, we can only guess. Here’s my guess then…

In UX you have this:

<Text Value="{TalkTitle}" />

In JS, we see this:

// ...
TalkTitle = TalkLocation.Title;
// ...
module.exports = {
    // ...
    TalkTitle: TalkTitle
    // ...
}

TalkTitle is not an Observable. Or if it was, you’re turning it into a string or something.

3

Sorry TalkTitle is an observable, forgot to include in code above.

Can I post the code privately somewhere?

4

It is strongly preferred that you would create a minimal reproduction instead of sharing a larger project. Plus, I don’t think it’s necessary.

Even if TalkTitle was an Observable, you’re replacing the whole variable with something else right here:

TalkTitle = TalkLocation.Title;

Try changing that line to:

TalkTitle.value = TalkLocation.Title;
5

OMG I cant believe I did that!

I used .value for the entire array, and then I put a plain text variable and forget to use .value…

Thanks, been knocking my head on this since last night.