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.