Skip to content

Checkboxgroup: Native Object Support #474

Description

@BrentH-Alnico

Hi Boris,

On this documentation page you mention using converters to support checkboxgroup objects (stringified)...although the sample link is incomplete...

...Alternatively, by using converters, the data property can instead be an array of selected objects, as in this sample.
https://www.jsviews.com/#jsvcheckboxgrouptag

I have built object support using helpers to switch object/strings...
However, I have a case where I needed to implement a checkboxgroup in two separate views using different data sources...it works of course if the two data sources share identical data used to create the identity strings. But in my case I found this to fragile a solution as...if a single character is different the strings would not match and break the checkboxgroup checked/unchecked state.

So I've have been thinking about how it might be possible to support native objects.
What if a 3rd checkboxgroup param could tell the parser to handle objects (as flag and objects source)...
When item is checked the identifier id is used for lookup in objects list fruit, then found object is deep cloned and added to array selectedFruit

Examples (3 & 4):

{^{checkboxgroup selectedFruit '.objectsCheckbox3' fruit}}

{^{checkboxgroup selectedFruit '.objectsCheckbox4' ~combineObjects(fruit, fruit2)}}

{^{checkboxgroup selectedFruit '.objectsCheckbox3' fruit}}
   {{for fruit}}
      <input class="objectsCheckbox3" type="checkbox" value="{{:id}}" /> {{:fruit}}
   {{/for}}  
{{/checkboxgroup}}

Issues:
If optional class '.objectsCheckbox3' is removed the array/call does not work, how to differentiate parsing (perhaps 'not' a class sting)?...not sure.

checkboxgroup is built to handle strings where a full change:set occurs on change. With objects it would be ideal if the changes refreshed incrementally thus we could transition the change; but not critical.

Taking this feature a bit further, it could be used for a cart where objects are mutable e.g. qty.
When adding products to cart: adding works fine. Removing works too, however with a design limitation where source data may not be available for checkboxgroup to work correctly, but a solution may be...
{^{checkboxgroup selectedFruit '.objectsCheckbox3' null}} tells the parser to still handle objects, but object data is null and not needed for removing items (only for adding).
However, it may not be an issue as it's unlikely that both things would be true in the same view (differing source objects data AND two checkboxgroup instances)...so therefore a simple removal of an item from selectedFruit cart observably without using checkboxgroup may suffice. Example included.

The attached files show my attempt at testing these ideas where I vibe coded using Gemini...and to my surprise it worked ;-)

Examples (1 & 2) are stringified objects and arrays methods.

Thanks,
Brent

Checkboxgroup_object_support.html
jsviews-1.20_with_object_support_v1.js

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions