javascript - RiotJS：如何在循环期间缓存值？

Question

我希望通过在RiotJSeach={}的循环期间缓存重复值来提高性能和可读性。有没有办法做到这一点不会呈现价值和/或产生不必要的性能开销？

前：

<my-tag>
  <p each="{item in data}">
    <b if="{item.style == 'b'}">{item.text}</b>
    <i if="{item.style == 'i'}">{item.text}</i>
  </p>
  data = [
    {"text": "bold me", "style": "b"},
    {"text": "italicize me", "style": "i"}
  ];
</my-tag>

<!-- Renders <p><b>bold me</b></p> <p><i>italicize me</i></p> -->

后：

<my-tag>
  <p each="{item in data}">
    {style=item.style}
    {text=item.text}
    <b if="{style == 'b'}">{text}</b>
    <i if="{style == 'i'}">{text}</i>
  </p>
  data = [
    {"text": "bold me", "style": "b"},
    {"text": "italicize me", "style": "i"}
  ];
</my-tag>

<!-- Renders <p>b bold me <b>bold me</b></p> <p>i italicize me <i>italicize me</i></p> -->

jsfiddle

Answer 1

我想你想这样做：

<p each="{data}">
  <b if="{style == 'b'}">{text}</b>
  <i if="{style == 'i'}">{text}</i>
</p>

jsfiddle

Answer 2

以下在 2.5 上有错误，但在下一个分支 (3.0.0-alpha.5) 上效果很好：

<my-tag>
  <p each="{item in data}">
    {(style=item.style) && false}
    {(text=item.text) && false}
    <b if="{style == 'b'}">{text}</b>
    <i if="{style == 'i'}">{text}</i>
  </p>
  data = [
    {"text": "bold me", "style": "b"},
    {"text": "italicize me", "style": "i"}
  ];
</my-tag>

因为表达式的计算结果为 false，所以它们不会渲染，但 和 的值style仍然text会被设置。