BorisMoore / jsviews

Interactive data-driven views, MVVM and MVP, built on top of JsRender templates
http://www.jsviews.com/#jsviews
MIT License
856 stars 130 forks source link

Disabled radiogroup not working #397

Closed APTEM09 closed 5 years ago

APTEM09 commented 6 years ago

Hello,

multiple input fields are working with the disable-feature. It seems so, that Radiogroups are not working with the disable-feature.

<div data-link="{radiogroup value} disabled{:disabled}">
{^{for items}}
<label class="radio-inline padding-5">
<input type="radio" class="margin-right-5" value="{{:value}}">{{:name}}
</label>
{{/for}}
</div>
BorisMoore commented 6 years ago

It is working. See below. But see also below for a proposed alternative syntax...

Let's suppose your boolean property you want to bind to is notEnabled (to make the syntax disabled{:notEnabled} - so as not to confuse the data property and the target: disabled).

You can add data-link="disabled{:~root.notEnabled}" to each <input>. (Using ~root to get to the parent context from the {{for}} block item context). Or you can pass notEnabled as a contextual parameter, as in:

Current syntax

<div data-link="{radiogroup value}">
  {^{for items ~notEnabled=notEnabled}}
    <label>
      <input type="radio" value="{{:value}}" data-link="disabled{:~notEnabled}">{{:name}}
    </label>
  {{/for}}
</div>

or

{^{radiogroup value ~notEnabled=notEnabled}}
  {^{for items}}
    <label>
      <input type="radio" value="{{:value}}" data-link="disabled{:~notEnabled}">{{:name}}
    </label>
  {{/for}}
{{/radiogroup}}

That said, it is a good idea to have a disabled property on the {{radiogroup}} itself. In the next update I will include that feature, so you can write the following (which is more convenient that the current syntax above):

Proposed alternative syntax

<div data-link="{radiogroup value disabled=notEnabled}">
  {^{for items}}
    <label>
      <input type="radio" value="{{:value}}">{{:name}}
    </label>
  {{/for}}
</div>

or

{^{radiogroup value disabled=notEnabled}}
  {^{for items}}
    <label>
      <input type="radio" value="{{:value}}">{{:name}}
    </label>
  {{/for}}
{{/radiogroup}}
BorisMoore commented 5 years ago

This has been fixed in release v0.9.91.