How to value.bind a function parameter from a repeat.for loop?

Question

I need to pre-select a value from an drop-down option in a Aurelia repeat.for html template. I just cannot figure out how to pass the variable field into the get getValue(field) function. I want to pass it from the repeat.for="field of fields" data. Maybe this is not possible due to some binding behaviour or maybe I need to use some special syntax like e.g. value.bind="getValue($field)". I am thankful for any help or maybe a hint where I could search. I tried some aurelia docs and search machine searches without any success. Or a hint that the question is not asked properly.

view.html

<div repeat.for="field of fields">
    <select class="form-control" value.bind="getValue(field)">
        <option value="0">-</option>
        <option repeat.for="connection of connections" model.bind="connection.field.value">...</option>
    </select>
</div>

view.js

@computedFrom('fragmentedData')
get getValue(field) {
    // if field is available in fragmentedData, return value, else 0 for empty option
}

What is actually passed to getValue in the code above? What's in fragmentedData[field]? Why the @computedFrom? — Benny
The value returned by getValue is it a string, number, or object? — Ashley Grant
@Benny: field is currently an object, where I just need the id for an equality check. I can therefor also pass field.id like getValue(field.id). The fragmentedData[index] stores only overlap items from fields. E.g. fields has many entries with ids [1...15] and fragmentedData has all available fields with ids [4, 7, 11, 12]. The user can configure further connections with the drop-down and may add or remove ids to fragmentedData. That's the main reason of this connection store view. — Ponti
@Ashley Grant: currently an object having some properties like e.g. id (number), name (string). I can alter it to only pass the id, which is required, therefor we could refactor it to getValue(field.id). — Ponti

Ponti Ponti · Accepted Answer · 2019-10-25T08:54:38

I solved the problem with an array container, where the connections are stored. In the activate-function of view.js initialize an array like:

async activate(config)
    this.fields = // request for all fields
    this.fragmentedData = // request for fragmentedDate, which are an overlap of fields
    this.storedConnections = []
    for (let index = 0; index < this.fragmentedData.length; index++) {
        this.storedConnections[index] = this.getConnectionValue(
            this.fragmentedData[index]
        );
    }
}

getConnectionValue(fragmentedDataEntry) {
    for (let index = 0; index < this.fields.length; index++) {
        // check equality and return value if given
    }
    return 0;
}

Now we are able to use a value.bind in the view.html like ($index is an auto-value in repeat.for determined by repeat.for="field of fields"):

<select class="form-control" value.bind="storedConnections[$index]">

Nevertheless it my be interesting if there is a syntax to pass parameters like in the original question. This trick is somehow a workaround, but it does the job. It just needs to react on the change-events to store and update the cached arrays.

How to value.bind a function parameter from a repeat.for loop?

1 Answers