[Feature] Bind property of component readonly #3381
Description
Description:
I've now been in the situation where I wanted to observe one of my child component's state multiple times.
For example, imagine a validating TextBox component, that surfaces whether it is currently valid through a property.
Normally when binding to a child component's property, the binding is initialized by writing the parent's value into the child, thus overwriting the child's initial value.
Since there already is a bind-<property> syntax, I imagined something like robind-<property> or readonlybind-<property>:
<TextBox robind-isValid="{{state.isTextboxValid}}"/>
As far as I understood it, binding to the computed properties of a child is not possible at the moment (at least the binding always seemed to overwrite the computed property for me). I don't know the rationale behind this, but maybe such a readonly binding would make it possible to bind to the computed values of a child?
Overall, then allowing something like this (wishful thinking):
<html>
<head>
<title></title>
<script src="https://cdn.jsdelivr.net/npm/ractive"></script>
</head>
<body>
<div id="content"></div>
<script>
let ValidatingTextBox = Ractive.extend({
data: function() { return { value: '' }; },
computed: {
'isValid': 'value.length > 0'
},
template: `
<input type="text" value="{{value}}" required/>
`
});
var instance = new Ractive({
components: { ValidatingTextBox },
el: '#content',
data: function() {
return {
inputStates: {
textbox0: false,
textbox1: false
}
};
},
computed: {
allValid: 'inputStates.textbox0 && inputStates.textbox1'
},
template: `
<ValidatingTextBox robind-isValid="{{inputStates.textbox0}}"/>
<ValidatingTextBox robind-isValid="{{inputStates.textbox1}}"/>
Valid: {{allValid}}
`
});
</script>
</body>
</html>