Conditionals

[sachalifs]

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:

- if (foo)
  .true True
- else
  .false False

[anthonyshort]

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 :)

[sachalifs]

Cool, thanks @anthonyshort !