5 ms·

I am not sure I see the value over React yet, but the more experiments in the field we have, the better we collectively are. So thanks a lot for building and op

by jasim 12y ago

I am not sure I see the value over React yet, but the more experiments in the field we have, the better we collectively are. So thanks a lot for building and open-sourcing this. Is there a non-trivial example of a Riot project that we can look at the code for? My confusion is around conditionals. The documentation says: In Riot the HTML structure is fixed. Only loops and conditionals can add and remove elements. But a div cannot be converted to a label for example. Riot only updates the expressions without complex subtree replacements. "Currently if is implemented with CSS display property as well". Considering this, how would I implement a page that has to show two completely different components based on a form input?

insin 12y ago
Seems like you'd have to include all possible components and toggle them based on a variable. It doesn't seem like you can apply an if attribute to a component directly - the second component here never disappears, but the first is wrapped in a <div> and does: http://bl.ocks.org/insin/5e0bf04cf1f701c235ad http://bl.ocks.org/insin/5e0bf04cf1f701c235ad
- jasim 12y ago
  Thanks a lot, this clarifies it. Having only CSS based hiding of components (and only if wrapped within a div) is a bummer. I am curious to know how the authors plan to work around it for serious app development.
tipiirai 12y ago
Like this <my-tag> <nested-tag1 if={ parent.val }/> <nested-tag2 if={ !parent.val }/> <input oninput={ edit }> edit(e) { this.val = e.target.value } </my-tag>
- jasim 12y ago
  Thanks for responding. You might want to look at insin's comment above. In insin's code example, the conditional doesn't work on a component, but does on a normal HTML tag. Would that be a bug? The lack of true conditionals is a turn-off for me. React's conditionals lets you build things like react-router without any extra semantics, in which the router picks up the appropriate component based on the URL.
  - tipiirai 12y ago
    On the child component you refer the parent data with `parent.` prefix.
    - insin 12y ago
      Toggling display of child components with an "if" attribute doesn't work if I change the expression to parent.component either - evaluating a component attribute declared in a parent in the context of the child is pretty surprising, if that's what happens. It seems like using a value attribute on a <select> doesn't set the selected value, I had to manually set selected on the <option>s to get it to work, and updating the value from elsewhere doesn't seem to affect the selected option either way. Checkbox events are throwing "SyntaxError: function statement requires a name". Wrapping the display of the disabled value in () instead of [] throws "SyntaxError: missing formal parameter" on load. Updated gist showing these here: http://bl.ocks.org/insin/5e0bf04cf1f701c235ad http://bl.ocks.org/insin/5e0bf04cf1f701c235ad I don't see any docs on using forms - is support for form elements still a work in progress?

by jasim 12y ago

insin 12y ago

Seems like you'd have to include all possible components and toggle them based on a variable. It doesn't seem like you can apply an if attribute to a component directly - the second component here never disappears, but the first is wrapped in a <div> and does: http://bl.ocks.org/insin/5e0bf04cf1f701c235ad http://bl.ocks.org/insin/5e0bf04cf1f701c235ad

jasim 12y ago
Thanks a lot, this clarifies it. Having only CSS based hiding of components (and only if wrapped within a div) is a bummer. I am curious to know how the authors plan to work around it for serious app development.

tipiirai 12y ago

Like this <my-tag> <nested-tag1 if={ parent.val }/> <nested-tag2 if={ !parent.val }/> <input oninput={ edit }> edit(e) { this.val = e.target.value } </my-tag>

jasim 12y ago
Thanks for responding. You might want to look at insin's comment above. In insin's code example, the conditional doesn't work on a component, but does on a normal HTML tag. Would that be a bug? The lack of true conditionals is a turn-off for me. React's conditionals lets you build things like react-router without any extra semantics, in which the router picks up the appropriate component based on the URL.
- tipiirai 12y ago
  On the child component you refer the parent data with `parent.` prefix.
  - insin 12y ago
    Toggling display of child components with an "if" attribute doesn't work if I change the expression to parent.component either - evaluating a component attribute declared in a parent in the context of the child is pretty surprising, if that's what happens. It seems like using a value attribute on a <select> doesn't set the selected value, I had to manually set selected on the <option>s to get it to work, and updating the value from elsewhere doesn't seem to affect the selected option either way. Checkbox events are throwing "SyntaxError: function statement requires a name". Wrapping the display of the disabled value in () instead of [] throws "SyntaxError: missing formal parameter" on load. Updated gist showing these here: http://bl.ocks.org/insin/5e0bf04cf1f701c235ad http://bl.ocks.org/insin/5e0bf04cf1f701c235ad I don't see any docs on using forms - is support for form elements still a work in progress?