可以在 ractivejs 中折叠和展开吗？

Question

正在查看example

HTML

 <ul>
    <li>Blueberry</li>
    <li>Raspberry</li>
    <li>Pear</li>
    <li>Apple</li>
    <li>Banana</li>
    <li>Cherry</li>
    <li>Mango</li>
    <li>Soursop</li>
    </ul>

想在ractivejs中是否可以这样

像这样：

<ul>
  {{#each fruit:i}}
   {{#if count > 4}}
    <a href="#" class="less">Show less</a>
   {{else}}
   <li>{{fruit.name}}</li>
   <a href="#" class="more">Show more</a>
   {{/if}}
  {{/each}}
</ul>

如果得到更多的物品，它会限制只有4个物品并显示"Show more"。然后在显示所有项目后单击显示较少，它将折叠。

想知道这是否可能？ css 动画是否也适用于 class: more and less 而不是展开和折叠的单击处理程序？（类似上下滑动）

Answer 1

是的，有可能。

折叠和展开只是跟踪活跃的用户，并为活跃的用户添加适当的 display 样式。这可以通过简单的模板来完成（参见代码的上半部分）。

"show more" 可以通过两种方式完成：

如果每次加载更多时动态加载数据（通过 ajax），那么您只需 concat 到现有的 fruits 数组并将其用于迭代.
如果您的数据已经存在（您加载了所有水果，但一次只想显示几个），您可以使用属性来跟踪当前显示的数量，以及一个计算属性以使用该数字对水果数组进行切片。单击加载更多将增加该数字（例如 4 到 8），这次将计算的道具踢到使用 8 重新计算。

这是一个例子：

<ul>
  {{#each slicedFruits:index}}
    <li>
      <!-- Here, clicking the header sets the current fruit to display -->
      <h4 on-click="set('currentFruitIndex', index)">{{name}}</h4>
      <!-- Here, we conditionally apply block or none depending on who's showing -->
      <div style="display:{{if currentFruitIndex === index}}block{{else}}none{{/if}};">{{details}}
    </li>
  {{/each}}
  <!-- using the built-in `add`, we add 4 to `displayedFruits` -->
  <a href="#" on-click="add('displayedFruits', 4)>Load More</a>
</ul>

<script>
component.exports = {
  data : {
    fruits: [],            // load up your fruits here
    currentFruitIndex: -1, // change this to any default, -1 for nothing
    displayedFruits: 4,    // change to how many you liked displayed first
  },
  computed: {
    // We slice the main array `fruits` by `displayedFruits`.
    // Changing `displayedFruits` will recalculate this and update the template
    slicedFruits: function(){
      return this.get('fruits').slice(0, this.get('displayedFruits'));
    }
  }
};
</script>

关于动画，你可以看看Transitions。 There's a good example of accordion here.

可以在 ractivejs 中折叠和展开吗？

Possible to collapse and expand in ractivejs?

ractivejs