RiotJS：如何在循环中缓存值？

我期望通过在RiotJS的each={}循环中缓存重复的值来提高性能和可读性。有没有办法这样做，不会产生价值和/或招致不必要的性能开销？RiotJS：如何在循环中缓存值？

前：

<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

来源

2016-07-21 Luke Dennis

我认为你要做到这一点：

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

jsfiddle

来源

2016-07-26 05:01:16 Freez

这将不包括我的使用情况下，我在寻找更复杂的行为：'{细胞= parent.row [column.key]} {cell.content}'等等。相当肯定”正确的“答案是使用预渲染函数重新构造数据以匹配DOM层次结构;我只是希望有一个干净的方式来做同样的事情。 –

我明白了，我认为将数据转换为更简单的结构是个好主意。 – Freez

下有虫子在2.5，但在next分支（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>

因为表达式的计算结果为假，不渲染，但style和text的值仍然设置。

来源

2016-07-28 01:50:29

RiotJS：如何在循环中缓存值？

回答

相关问题