search

BorisMoore / jsrender

A lightweight, powerful and highly extensible templating engine. In the browser or on Node.js, with or without jQuery.
http://www.jsviews.com
MIT License
2.68k stars 340 forks source link

Multi-select checkbox group #350

Closed wklau2006 closed 5 years ago

wklau2006 commented 5 years ago

I have been using this script for some time and found it useful. Recently I tried to create a checkbox group but I found it more difficult than I expected.

I found the radio group example but there is no checkbox group.

I found the multiselect control example but it requires multiselect.js: https://www.jsviews.com/#samples/tag-controls/multiselect

I found the Form elements: Array binding example: https://www.jsviews.com/#samples/form-els/array-binding but it is not as easy as the radio group. I managed to write converters to make it work, but it will be much more convenient to have built-in support on checkbox group similar to radio group, e.g.

// Existing: (radiogroup)
    {^{for amounts}}
      <label><input type="radio" name="amt" value="{{:#data}}"
        data-link="{converter1:~root.amount:converter2}" />
      {{:#data}}</label><br/>
    {{/for}}

// Requested: (checkboxgroup) 
    {^{for amounts}}
      <label><input type="checkbox" name="amt" value="{{:#data}}"
        data-link="{converter1:~root.amount:converter2}" />
      {{:#data}}</label><br/>
    {{/for}}
// or the alternative syntax like radio group

where the value ("amount" in above example) could be array, e.g. [value1, value2, ...].

I hope I have not missed something already exist. Thanks.

BorisMoore commented 5 years ago

I'm not sure whether I understand the exact behavior you are looking for.

Currently you can write:

{^{for amounts}}
  <label><input type="checkbox" data-link="amt" />{^{:amt}}</label><br/>
{{/for}}

with data = { amounts: [{amt: true}, {amt: true}, {amt: false} ] }; or similar...

Clicking on the checkbox will flip the corresponding data.amounts[i].amt between false and true.

Of course, you can also use converters: data-link="{...:amt:...}"

Does that cover your requirements. If not can you provide a sample showing the behavior you want (even if the converters are complex...)?

wklau2006 commented 5 years ago

I'd would like multiple selection like normal HTML form, e.g. using the array binding example: https://www.jsviews.com/#samples/form-els/array-binding

The data.amounts is [0, 1, 2, 3, 4, 5, 6, 7], data.amount is 3, using the radiogroup, data.amount will be changed by selecting a radio button.

I wish it is similar for checkbox group, e.g. if data.amount is [3, 4] (or "3,4"), it check the checkboxes with corresponding values, and clicking a checkbox will change data.amount, e.g. clicking a checkbox with value="5" (in JsViews syntax) will change data.amount to [3, 4, 5] (or "3,4,5").

The select tag (I add the "multiple" attribute) does work as I expected, e.g.

<input data-link="amount"/>
<select multiple data-link="amount" size="8">
      {^{for amounts}}
        <option data-link="value{:#data}">{{:#data}}</option>
      {{/for}}
    </select>

The \ will show "3,4,5" if I select those values in the \