Input value for radius in ractivejs

Question

<button class="button {{radius ? 'button-radius' : ''}} {{radius || ''}} {{size || '' }}">
   {{ text }}
</button>

output from:

<button radius="15px" size="med" text="whatever" />

Wanted it to be easy for users to input border-radius="#px" instead of me using css to change radius. So I have been fidding but only button-radius works which has 5px radius set. Is there any way to be able to input value number in radius?

Help appreciated

Answer 1

There are a couple of ways you could do this. First, you could incorporate a <style> tag into your template - that way it becomes subject to the same data-binding rules as everything else:

var ractive = new Ractive({
  el: 'main',
  template: '#template',
  data: {
    radius: 10
  }
});

label { display: block; }
button.large { font-size: 2em; padding: 20px; }

<script src="http://cdn.ractivejs.org/latest/ractive.js"></script>

<main></main>

<script id='template' type='text/html'>
  <style>
    button {
      padding: 10px;
      border-radius: {{radius}}px;
    }

    button.large {
       border-radius: {{radius*2}}px;
    }
  </style>

  <label>
    <input type='range' value='{{radius}}' min='1' max='20'/>
    {{radius}}px
  </label>

  <button>I am a button</button>
  <button class='large'>I am a button</button>
</script>

Secondly, in this scenario it's perfectly sensible to use inline styles:

var ractive = new Ractive({
  el: 'main',
  template: '#template',
  data: {
    radius: 10
  }
});

label { display: block; }
button.large { font-size: 2em; padding: 20px; }

<script src="http://cdn.ractivejs.org/latest/ractive.js"></script>

<main></main>

<script id='template' type='text/html'>
  <label>
    <input type='range' value='{{radius}}' min='1' max='20'/>
    {{radius}}px
  </label>

  <button style='border-radius: {{radius}}px'>I am a button</button>
  <button class='large' style='border-radius: {{radius*2}}px'>I am a button</button>
</script>