Dojo FAQ: Why does RoundRectStoreList.set(“store”) not reset the data in the object?

One pretty common issue we get in the dojo-interest mailing list asks why RoundRectStoreList.set("store", store); doesn’t actually appear to be setting the store properly? That is, the data in the RoundRectStoreList doesn’t actually render the data in the new store, but instead keeps old data rendered.

An example of this error:

HTML:

<ul id="storeList"></ul>
<button type="button" id="wrongSwap">Swap 'Em!</button>

JavaScript:

require([
	"dojo/store/Memory",
	"dijit/form/Button",
	"dojox/mobile/RoundRectStoreList"
], function (Memory, Button, RoundRectStoreList) {
	var sampleStore1 = new Memory({data:[
			{ "label": "Wi-Fi", "rightText": "Off", "moveTo": "bar" },
			{ "label": "VPN", "rightText": "VPN", "moveTo": "bar" }
		], idProperty:"label"}),
		sampleStore2 = new Memory({data:[
			{ "label": "Ice Cream", "rightText": "Ice Cream", "moveTo": "bar" },
			{ "label": "Shortcake", "rightText": "Shortcake", "moveTo": "bar" }
		], idProperty:"label"}),
		storeList = new RoundRectStoreList({store:sampleStore1}, "storeList"),
		wrongSwap = new Button({}, "wrongSwap"),
		isStore1 = true;
	
	storeList.startup();

	wrongSwap.on("click", function () {
		storeList.set("store", isStore1 ? sampleStore2 : sampleStore1);
		isStore1 = !isStore1;
	});
});

Here, you will see that the data in the list never actually changes, even though we’re attempting to set the store using the .set() function.

Simply put, this is because that while RoundRectStoreList does inherit from dijit/_WidgetBase, it doesn’t actually use a _setStoreAttr method to handle setting the store. Instead it implements a RoundRectStoreList.setStore(store); method, which must be used instead. This method will handle the rerendering of the list with new data.

The necessary way to do this is:

HTML:

<ul id="storeList"></ul>
<button type="button" id="rightSwap">Swap 'Em!</button>

JavaScript:

require([
	"dojo/store/Memory",
	"dijit/form/Button",
	"dojox/mobile/RoundRectStoreList"
], function (Memory, Button, RoundRectStoreList) {
	var sampleStore1 = new Memory({data:[
			{ "label": "Wi-Fi", "rightText": "Off", "moveTo": "bar" },
			{ "label": "VPN", "rightText": "VPN", "moveTo": "bar" }
		], idProperty:"label"}),
		sampleStore2 = new Memory({data:[
			{ "label": "Ice Cream", "rightText": "Ice Cream", "moveTo": "bar" },
			{ "label": "Shortcake", "rightText": "Shortcake", "moveTo": "bar" }
		], idProperty:"label"}),
		storeList = new RoundRectStoreList({store:sampleStore1}, "storeList"),
		rightSwap = new Button({}, "rightSwap"),
		isStore1 = true;
	
	storeList.startup();

	rightSwap.on("click", function () {
		storeList.setStore(isStore1 ? sampleStore2 : sampleStore1);
		isStore1 = !isStore1;
	});
});

This issue can be difficult to spot, as the syntax is correct for widgets that inherit from dijit/_WidgetBase; however, once you understand how RoundRectStoreList works under-the-hood for setting its store, this issue is easily worked around.