Using With SPA

Many sites update content dynamically, and it’s 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 the recipe URL for the 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:

whisk.queue.push(function() {
whisk.display('myWidget');
});

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',
});
});

Subscriptions

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.