Trouble With Select and Binding

Help Requests
1

I am having trouble duplicating an array that I need in order for the user to select from the dropdown.

The dropdown is sized properly, but the values are all blank. I have copied these arrays from search.html/search.js where they work perfectly.

This is a new view - customer - and the values are blank.

my html code:

                    <td class="small index_table border">
                        <label for="client">
                            Client:
                        </label>
                        <select name='client' value.bind="selectedClient">
                            <option model.bind="null"></option>
                            <option repeat.for="client of clients"
                                    model.bind="client.client">
                                ${client.client}
                            </option>
                        </select>            
                    </td>
                    <td class="small index_table border">
                        <label for="cust_info_field">
                            Info:
                        </label>
                        <select name='cust_info_field' value.bind="selectedCustInfo">
                            <option model.bind="null"></option>
                            <option repeat.for="info of custInfoField"
                                    model.bind="info.value">
                                ${info.display}
                            </option>
                        </select>

and my js code:

export class Customer {
    constructor(api) {

        this.selectedClient = 0;

        this.clients = [
            { clt_id: 0, client: 'AC Moving' },
            { clt_id: 1, client: 'Air Van' },
            { clt_id: 2, client: 'Berger' },
            { clt_id: 3, client: 'Berger Escalated' },
            { clt_id: 4, client: 'Berger Term Drivers' },
            { clt_id: 5, client: 'Morse Moving' },
            { clt_id: 6, client: 'Nor-Cal' },
            { clt_id: 7, client: 'Pyramid' },
            { clt_id: 8, client: 'Reliable' },
            { clt_id: 9, client: 'Santini' },
            { clt_id: 10, client: 'SMMoving' },
            { clt_id: 11, client: 'Stratosphere' }
        ];
    
        
        this.selectedCustInfo = 0;
        
        this.custInfoField = [
            { value: 'All', display: 'All' },
            { value: 'Name', display: 'Name' },
            { value: 'Contacts', display: 'Contacts' },
            { value: 'City', display: 'City' },
            { value: 'My Notes', display: 'My Notes' },
            { value: 'All Notes', display: 'All Notes' },
            { value: 'Report As', display: 'Report As' },
            { value: 'Parent Customer', display: 'Parent Customer' },
        ];
    
    }
}

My custInfo dropdown did have values in it until i added the this.selectedCustInfo = 0;, so I am not sure what is going on, or what I’ve done wrong. Especially as it worked fine in another view.

1 Like
2

should model.bind=“client.client” just be model.bind=“client”?
only thing I see different from the doc examples and think the next line is trying t o access a property called client on a string?

1 Like
3

I have a property called client, which is why it says ‘client.client’

1 Like
4

I loaded up me…er…dumber and copied your code in. It appears model.bind wasn’t doing what I thought it was (and can actually be removed with no effect.) The select works just fine there.
https://gist.dumber.app/?gist=9ebeb1691665d0005f63e1165f86ef91

1 Like
5

You need to set it to model.bind="client.clt_id". That way, your default value of 0 will match your first item in the data model.

1 Like
6

Updated the dumber gist to show what @khuongduybui was saying.
And I got educated again on what model.bind is doing.

Notice for custInfoField that you were trying to set the selected to 0 (zero) when the value being bound was a string. I changed that to “All” to select the first value and it now displays the first option element.

1 Like
7

Another trick: if we want to keep this.selectedCustInfo = 0 we can also do model.bind="$index" :wink:

That would have also worked for the first <select>, since clt_id is equal $index with given data.
I recommended clt_id simply because it is safer and will work with arbitrary data too.

2 Likes
8

I added that in a second example.

1 Like
9

Thank you! it is now working.

1 Like
10

Apologies to the OP but I think this is still related to the question / issue so left it here.
@khuongduybui Just so I have it in my head again.

Why use model.bind?
In this case model.bind instead of value.bind for the option element?

At first I thought it might just be a set the default value holder (which it kind of does), but in the docs for checkboxes at least I see both model.bind and checked.bind being used together.

Then I finally found this:
Normally we cannot use the standard value attribute in conjunction with checked binding because it coerces anything it’s assigned to a string.

Does this mean that by using model.bind it prevents coercion, so all native types can be assigned to the ‘value’ attribute on elements with a value property though the use of model.bind?
So for example numbers, objects, functions, etc can now be stored and retrieved intact from value?

1 Like
11

Correct. If you set in the first example model.bind="client", then you can show later <p>You selected a client with name ${selectedClient.client} and id ${selectedClient.ctl_id}</p>.

2 Likes