Using with SPA

Many sites update content dynamically, and its possible to do this with Whisk SDK.

Updating Widget

For example: your user switches from one recipe page to another and you want to update recipe url for widget. For that you need to remove the old widget definition and create a new one.

whisk.queue.push(function () { // Creating widget whisk.shoppingList.defineWidget('myWidget', { recipeUrl: 'https://first-recipe-url', }); // Removing widget whisk.remove('myWidget'); // Creating new widget whisk.shoppingList.defineWidget('myWidget', { recipeUrl: 'https://second-recipe-url', }); });

Make sure you call display with updated widget id:

<div id="myWidget"> <script> whisk.queue.push(function() { whisk.display('myWidget'); }); </script> </div>

Updating Event Listeners

Same logic applies for event listeners. Whenever you want to update listener just remove it and create a new one.

whisk.queue.push(function () { // Creating listener whisk.listeners.addClickListener('myButton', 'shoppingList.addRecipeToList', { recipeUrl: 'https://first-recipe-url', }); // Removing listener whisk.listeners.removeClickListener('myButton'); // Creating new listener whisk.listeners.addClickListener('myButton', 'shoppingList.addRecipeToList', { recipeUrl: 'https://second-recipe-url', }); });


Whenever you remove widget or event listeners, all subscriptions will be removed as well. So whenever you update your widget or event listener don't forget to subscribe to desired events again.