directory : /web/ : ractive.html

Directory path . web .
HTML Document File : ractive.html


<!doctype html>

<title>ractive: simple html+svg binding</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">


<script src="https://cdn.jsdelivr.net/npm/ractive"></script> 

<div id="target"></div>

<script id="template" type="text/ractive">

<p>{{greeting}}, {{name}}!</p>
<input type="range" min="1" max="100" value="{{radius}}" class="slider" id="myRange"> <br>

<svg width="400" height="110">
<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
<circle cx="50" cy="50" r="{{radius}}" stroke="black" stroke-width="3" fill="red" />
</svg>

</script>

<script>
var ractive = Ractive({
  target: "#target",
  template: "#template",
  data: {
    greeting: 'Hello',
    name: 'world',
    radius: 50,        
        }
});
</script>

<script src="/web/show-source.js"></script>