Variables don't update from fetch promises in page data contexts

How-to Discussions
1

MainView.ux

<App Model="App">
	<StackPanel>
		<Navigator Pages="{pages}">
			<MainPage ux:Template="MainPage"/>
		</Navigator>
		<Text Value="{mainTestStr}" />
	</StackPanel>
</App>

App.js


import MainPage from 'pages/mainpage';

export default class App {
	constructor() {
		this.pages = [new MainPage()];
		//this.testStr = "";
		this.mainTestStr = "hello world";

		fetch("https://gist.githubusercontent.com/petterroea/5ed146454706990ea8386f147d592eff/raw/b157cfed331da3cb88150051ab74aa131022fef8/colors.json").then((data) => {
			return data.json();
		}).then((json) => {
			var a = "";
			for(var b in json) {
				a += "\n" + b.colorName;
			}
			console.dir(json);
			console.log("Test string: " + a);
			this.mainTestStr = a;
		}).catch((err) => {
			console.log(err);
		});
	}
}

pages/MainPage.ux

<Page ux:Class="MainPage">
	<Text Value="{testStr}" />
</Page>

pages/mainpage.js

export default class MainPage {
	constructor() {
		this.testStr = "hello world";

		fetch("https://gist.githubusercontent.com/petterroea/5ed146454706990ea8386f147d592eff/raw/b157cfed331da3cb88150051ab74aa131022fef8/colors.json").then((data) => {
			return data.json();
		}).then((json) => {
			var a = "";
			for(var b in json) {
				a += "\n" + b.colorName;
			}
			console.dir(json);
			console.log("Test string from page model: " + a);
			this.testStr = a;
		}).catch((err) => {
			console.log(err);
		});
	}
}

The URL is from the fetch example, which uses observables.

Expected behavior

Both the Text in MainView and MainPage are updated with a list of undefined

What happens

Only the text in MainView is updated, even though the console looks like this, indicating that both requests succeed:

[Viewport]: Array[8]
  0: Object
  1: Object
  2: Object
  3: Object
  4: Object
  5: Object
  6: Object
  7: Object

[Viewport]: Test string from page model: 
undefined
undefined
undefined
undefined
undefined
undefined
undefined
undefined
[Viewport]: Array[8]
  0: Object
  1: Object
  2: Object
  3: Object
  4: Object
  5: Object
  6: Object
  7: Object

[Viewport]: Test string: 
undefined
undefined
undefined
undefined
undefined
undefined
undefined
undefined