JS: callback error when called from Each collection

I took the TodoApp sample and grouped the actions into a sub-object, as following:

module.exports = {
    todoList: todoList,
    titleInput: titleInput,
    currentTab: currentTab,
    remainingText: remainingText,
    canClearCompleted: canClearCompleted,
        addItem: addItem,
        deleteItem: deleteItem,
        toggleAll: toggleAll,
        toggleItem: toggleItem,
        clearCompleted: clearCompleted,
        showAll: showAll,
        showActive: showActive,
        showCompleted: showCompleted

And I then modified MainView.ux accordingly:

<Button Clicked="{actions.addItem}" Width="60" Height="60" HitTestMode="LocalBoundsAndChildren">
<Each Items="{todoList}">
    <Button Clicked="{actions.toggleItem}" Alignment="CenterLeft" Width="60" Height="60">
    <Button Alignment="CenterRight" Clicked="{action.deleteItem}" Width="60" Height="60"
<Button ux:Name="allButton" Text="" Clicked="{actions.showAll}">

The bug: actions within the <Each> collection trigger a JS error (“Something went wrong”) while those outside work normally.

Thank you for reporting. :slight_smile:

There is an internal issue raised for this (“Databinding paths does not work on event handlers”).

Currently, a workaround is to expose all handlers in the top level of your module.exports-section.

I can not see from your example code where Each comes into play. Do you have some more code to illustrate how this is affected by Each?

I edited the sample code to show the <Each> block.

Actions outside it (actions.addItem, actions.showAll) do work, but the actions inside the collection fail (actions.toggleItem, actions.deleteItem).

Thank you, I will update our issue. :slight_smile:

Hi Philippe,

This feature is now implemented/issue is resolved, and is expected to roll out in version 0.8.6.

Please let us know if you still have problems with it after that version.

Thanks for your help!