Closed sachalifs closed 10 years ago
With the current version that uses data-binding, it's usually easiest to just show/hide elements.
<div hidden="{{ someAttribute }}"></div>
Or inverse it
<div hidden="{{ !someAttribute }}"></div>
If you want to make a show/hide binding, it's not too hard. This example uses a <noscript>
tag to act as a placeholder when you add/remove the element so it knows where to put it.
View.directive('if', {
bind: function(node, view){
this.parent = node.parentNode;
this.placeholder = document.createElement('noscript');
},
update: function(value, node, view){
if (value === false) {
this.parent.replaceChild(this.placeholder, node);
}
else if (this.placeholder.parentNode) {
this.parent.replaceChild(node, this.placeholder);
}
}
});
Might require a bit of work because that's directly off the top of my head :)
Cool, thanks @anthonyshort !
Is there any way of using a coditional on the template like in https://github.com/component/reactive#hiding-and-showing-elements?
Or for example on jade you would do: