Bug: Ractive Computed in get(virtual:true)
by Christian Meixner
HTML
<script src="https://cdn.jsdelivr.net/npm/[email protected]/ractive.js"></script>
<div id="demo"></div>
<b>See Console output</b>
<script id="tmpl" type="text/template">
{{#each obj}}
{{>outputBox}}
{{/each}}
{{#each arr}}
{{>outputBox}}
{{/each}}
{{#partial outputBox}}
<div class="box">
Static Value: {{.static}}<br>
Computed Value: {{.calculated}}
<div>
{{/partial}}
</script>
CSS
* { box-sizing:border-box; }
body {font-family:helvetica; font-size:12px}
h2 {margin-bottom:5px;}
.box {
cursor: pointer;
width: 150px;
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;
}
JavaScript
Ractive.WELCOME_MESSAGE = false;
console.log(Ractive.VERSION);
const app = new Ractive({
el: '#demo',
template: '#tmpl',
computed: {
'obj.*.calculated': {
get: function () {
return 1;
}
},
'arr.*.calculated': {
get: function () {
return 1;
}
}
},
data: {
obj: {
item1: {
static: 1
}
},
arr: [
{
static: 1
}
]
},
oncomplete: function () {
const obj = this.get('obj', {virtual:true});
const arr = this.get('arr', {virtual:true});
const out = document.createElement('pre');
out.textContent =
'obj: ' + JSON.stringify(obj) + "\n" +
'arr: ' + JSON.stringify(arr) + "\n";
document.body.appendChild(out);
console.log(obj);
console.log(arr);
}
});