Checkbox binding behaves incorrectly about bind-middleware

[solkimicreb]

Again, you are correct on this one, but this is slightly tricker than the multi-select case. If you check Angular, Vue or pretty much any other framework with data binding, check boxes represent a single binary value in them (just like in NX).

If I would follow the spec more strictly I would need to use an array here too, but most people does not expect that behavior. For single non binary items (enums), you can use radio button groups. This leaves multi-select as the only multi control for now (it's fixed). What would you use for single non binary data-bound toggles, if i reworked check boxes?

I could use some feedback, and big thanks for the issues (:

[jaypha]

If I would follow the spec more strictly I would need to use an array here too, but most people does not expect that behavior.

My philosophy is that you shouldn't pander to false beliefs or expectations, even popular ones. Do it the right way, and work to raise awareness.

What would you use for single non binary data-bound toggles, if i reworked check boxes?

My idea is that, for when the type is 'boolean', it would behave as it does now. But for other types, use an array. This will support both behaviors at the expense of more complexity.

Regards

[solkimicreb]

So in case of a single checkbox, I plan to use the current single value as model. When there are multiple checkboxes with the same name I plan to use an array as model. My issue is the transition between these two modes (single value to array). Consider the following:

<input type="checkbox" name="food" value="pizza" bind="string">
<input type="checkbox" name="food" value="salad" bind="string">

(I improved bind parsing so bind="string" will work after this fix, as parameter order won't matter.)

In this case the old mode would set food to "pizza", when only pizza is ticked. When both is ticked it would set food to ["pizza", "salad"]. This transition from single value to array would be really inconvenient. I can't stick with only arrays as it would mess with the current behavior (instead of true and undefined, it would set the model to [true] and [undefined]).

I see a few options to tackle this.

1. Use single values when bind type is boolean and use arrays otherwise. I don't really like this as type is not really meant to control this (it should control the type of single values in the array).

2. Use a single value when the model variable is not an array, use an array otherwise. This would require the user to initialize the model as an empty array before using it. It kind of goes against the permitting nature of data binding in NX.

3. Allow the non-standard multiple attribute on checkboxes, which would toggle between the array and single value behavior. When multiple is set, type would be string by default, otherwise boolean. This would add a bit of extra code, but I still like this one the most. The above example would look like this:

<input type="checkbox" name="food" value="pizza" multiple bind>
<input type="checkbox" name="food" value="salad" multiple bind>

@jaypha What's your opinion? (Sorry for the verbose comment)

[jaypha]

I like #3 as well. You could do it as you suggested or use an extra config parameter. For example

<input name="rank" value='5' $bind="{type: 'number', multiple: true}" type="checkbox"/>
<input name="rank" value='4' $bind="{type: 'number', multiple: true}" type="checkbox"/>

or something like that. This way you don't need a non-standard attribute. Either way works for me, though.

Thanks.
Regards, Jason

[solkimicreb]

Okay, I will go with one of those options then, I think I will have time to push the fix and better option parsing in the weekend.

Also I reworked the bind syntax for the next major version of NX. It will be like:

<input bind="name" />
<input $bind="name on input" />
<input @bind="name as string" />
<input @bind="name as string on input" />
<input @bind="person.name as string on input & debounce" />
<input @bind="person[key] as string on input, change, blur & debounce 400 & throttle 500" />

The bind type (one-way, one-time, two-way) can be set with the ('', $, @) attribute prefixes. Limiters can be added to the end and the first part can be any valid JS expression that can go on either side of a = sign. I think it will make it more consistent with the rest of the attributes. It will take me a few weeks at least to finish the next version though.