Ractive Computed Props

by Christian Meixner

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/ractive.js"></script>

<div id="demo"></div>

<script id="tmpl" type="text/template">
{{#each boxes}}
<div class="box" on-click="@.toggle(@keypath + '.flag')">

<div class="state" class-active=".enabled"></div>

<div class="state" class-active="!.disabled"></div>

<br> {{.flag}}
<div>
{{/each}}
</script>

CSS

* { box-sizing:border-box; }

body {font-family:helvetica; font-size:12px}

h2 {margin-bottom:5px;}

.box {
  cursor: pointer;
  width: 100px;
  height:100px;
  background:#ccc;
  border: 1px solid #666;
  box-shadow:0 1px 3px rgb(0,0,0,0.3);
  margin: 10px;
  text-align: center;
  padding: 5px;
}
.state {
  display: inline-block;
  margin: 5px;
  width:10px;
  height:10px;
  background:#f33;
  border-radius:50%;
}
.state.active {
  background:#3f3;
}

JavaScript

Ractive.WELCOME_MESSAGE = false;
console.log(Ractive.VERSION);

const app = new Ractive({
  el: '#demo',
  template: '#tmpl',
  computed: {
  	'boxes.*.enabled': {
    	get: function (box) {
      	this.get('boxes');
    		return box.flag;
      }
    },
  	'boxes.*.disabled': {
    	get: function (box) {
      	this.get('boxes');
    		return !box.flag;
      }
    }
  },
  data: {
  	boxes: {
    	box1: {
      	flag:false
      },
    	box2: {
      	flag:false
      }
    }
   }
});