MatchKey Observable

How-to Discussions
1

Small example

<App>
    <JavaScript>
	var Observable = require("FuseJS/Observable");
	var items = Observable();
	items.add({"name":"Light1", "state":"on"});
	items.add({"name":"Light2","state":"off"});

	function switchLight() {
		items.getAt(0).state = "off";
	}
	module.exports = {
		items:items,
		switchLight:switchLight
	};
    </JavaScript>
    <StackPanel>
	<Each Items="{items}" MatchKey="state">
	    <Text ux:Template="on" Value="{name} is switched on" />
	    <Text ux:Template="off" Value="{name} is switched off" />
	</Each>
	<Button Text="switch light 1 off" Clicked="{switchLight}" />
    </StackPanel>
</App>

If you press the button in the example above, nothing happens.
So, i thought, okay, maybe state needs to be Observable…

<App>
    <JavaScript>
	var Observable = require("FuseJS/Observable");
	var items = Observable();
	items.add({"name":"Light1", "state":Observable("on")});
	items.add({"name":"Light2","state":Observable("off")});

	function switchLight() {
		items.getAt(0).state.value = "off";
	}
	module.exports = {
		items:items,
		switchLight:switchLight
	};
    </JavaScript>
    <StackPanel>
	<Each Items="{items}" MatchKey="{state}">
	    <Text ux:Template="on" Value="{name} is switched on" />
	    <Text ux:Template="off" Value="{name} is switched off" />
	</Each>
	<Button Text="switch light 1 off" Clicked="{switchLight}" />
    </StackPanel>
</App>

Turns out, if you press the button, still nothing happens, but instead every state is shown right away

Light1 is switched on
Light1 is switched off
Light2 is switched on
Light2 is switched off

So am i assuming right, that i can’t get this case done with the lightweight MatchKey structure and have to go for Match/Case instead?
(Actually doing something like items.replace(newItems); doesn’t solve the problem, as that would trigger WhileBusy which i don’t want to)