Variable in store not persisting - Aurelia Store

Help Requests
1

I have a field that I am updating via a dropdown selection. When an item is chosen, it is added to the text box.

I have an onchange value attached to the input field, but it never fires. So I am calling it myself when I call addToWorklist, and I have to explicitly set the value of the state’s variable itself.

When I click away from the form, and then return, all the other state variables are consistent, but the input field for these values is always empty, and I’m not sure what I am doing wrong.

Here’s the view model:

                            <td>
                                Worklist(s):
                                <input type="text" name="worklist_list"
                                    id="worklist_list" size="14" element.ref="state.searchObj.worklist_list"
                                    onchange.call="worklistChanged()"
                                    value.bind="state.searchObj.worklist_list" maxlength="50">
                            </td>

Here’s the addToWorklist function where I call worklistChanged because I can’t figure out how to fire the change event any other way.

    addToWorklist() {
        var d = document;
        var worklistField = d.getElementById('worklist_list');
        var oldWl = d.getElementById('worklist_list').value;
        var newWl = this.state.searchObj.selectedWorklist;
        worklistField.addEventListener('change', this.worklistChanged, false);
        
        if ( oldWl )
        {
            d.getElementById('worklist_list').value = oldWl + ',' + newWl;
        }
        else
        {
            d.getElementById('worklist_list').value = newWl;
        }

        var newWorklistList = d.getElementById('worklist_list').value;
        this.worklist_list = newWorklistList;
        this.state.searchObj.selectedWorklist = null;
        this.state.searchObj.worklist_list = d.getElementById('worklist_list').value;
        
        this.worklistChanged();
        //console.log('worklist_list', this.state.searchObj.worklist_list);
    }

Here’s the workListChanged function:

    worklistChanged()
    {
        console.log('changed worklist_list', this.worklist_list);
        console.log('changed worklist_list state', this.state.searchObj.worklist_list);
    }

I can see that the state’s value is set, but when I come back to the form, it is empty again.

I’ve also tried subscribing to an onChanged event through the connectTo decorator:

@connectTo({
    //target: 'currentState',
    selector: (store) => store.state.pipe(pluck("wlTypeRadio")), // the complete state if you need
      onChanged: 'changedHandler'
  },
  { selector: (store) => store.state.pipe(pluck("potentialBadDebRadio")),
    onChanged: 'setWLType'},
    { selector: (store) => store.state.pipe(pluck("worklist_list")),
    onChanged: 'worklistChanged'}

  )
2

There are a few things to change here that I think may make your life a bit easier.

Firstly, it would be easier to avoid any getElementById calls. Have you looked at observables at all?

http://aurelia.io/docs/binding/observable-properties#observable-properties

Could you bind your dropdown selection to an observable, then you could effectively do what you’re doing in your addToWorklist() function really easily. Remember that your view (html) will react and update to changes in your view model (js). If you start grabbing references to controls on your view to change them, it sort of breaks the whole idea. The text that you bind in your worklist_list input should be a variable in your view model.

Secondly, you really need to be dispatching actions to update the state in the store. The docs here…

http://aurelia.io/docs/plugins/store#what-are-actions

… I think are great. This isn’t exclusive to how the aurelia store works either. I think if you take a look at any of the most common implementations for other frameworks, the concepts are almost identical.

Sorry if none of that helps/makes sense/is irrelevant. Just trying to offer a few pointers.

1 Like