CODEWITHSUNDEEP
drop-down-menuparametersbindaureliarepeat
Ponti
Ponti

Reputation: 1

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

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
}

Upvotes: 0

Views: 498

Answers (1)

Ponti
Ponti

Reputation: 1

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.

Upvotes: 0

Related Questions