ractivejs中半径的输入值

Question

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

产出来自：

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

希望用户能够轻松地输入边框- radius =“#px”，而不是使用css更改半径。因此，我一直在摆弄，但只有按钮半径的工作，其中有5px半径集。有没有办法输入半径内的值号？

助赏

Answer 1

有几种方法你可以做到这一点。首先，您可以将一个<style>标记合并到模板中--这样它就会受到与其他所有东西相同的数据绑定规则的约束：

​

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>

​

其次，在这个场景中，使用内联样式是非常明智的：

​

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>

​