RactiveJS-06 List sections

最新推荐文章于 2023-07-13 16:36:44 发布

「已注销」

最新推荐文章于 2023-07-13 16:36:44 发布

阅读量461

点赞数

分类专栏： Ractive

本文链接：https://blog.csdn.net/duola8789/article/details/70135838

版权

Ractive 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

使用方法

使用{{#each list}}来对数组对象进行循环，看下面的例子：

<body>
    <div id="container"></div>
    <script type="text/ractive" id="template">
        <table>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>能力</th>
            </tr>
            {{#each superHeroes}}
            <tr>
                <td>{{name}}</td>
                <td>{{age}}</td>
                <td>{{ability}}</td>
            </tr>
            {{/each}}
        </table>
    </script>
    <script>
        var xmen = [{name : "金刚狼", age : 23, ability : 'eat'},
                {name : "金刚狗", age : 32, ability : 'sleep'},
                {name : "金刚熊", age : 23, ability : 'run'}];
        var ractive1 = new Ractive({
          el : '#container',
          template : '#template',
          data : {
           superHeroes : xmen
          }
        });
        ractive1.set('superHeroes[0].name', '金刚猫')
    </script>
</body>

获得数组序号

Mustache并没能提供一个很好的方式获得数组序号，所以RactiveJS引入了序列变量（index reference）

{{#each list:num}}
  <!-- inside here, {{num}} is the index -->
{{/each}}

通过将num声明为序列变量，就可以像使用其他变量一样使用它。将上面的表格的循环数据改为：

<table>
   <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>能力</th>
    </tr>
    {{#each superHeroes:num}}
    <tr>
        <td>{{num+1}}</td>
        <td>{{name}}</td> 
        <td>{{age}}</td>
        <td>{{ability}}</td>
    </tr>
{{/each}}
</table>

这样就可以获得各组的序号。

增加数组项

可以使用ractive.update(‘list’)来更新表格数据。注意，如果没有给此方法传入变量，则它会更新所有元素。

也可以直接使用数组方法（push，pop，shift，unshift，splice，sort，reverse）方法自动更新数组。如果不想让上述方法自动更新数据，可以再初始化选项中设置了modifyArrays: false。

<script>
    var xmen = [{name : "金刚狼", age : 23, ability : 'eat'},
        {name : "金刚狗", age : 32, ability : 'sleep'},
        {name : "金刚熊", age : 23, ability : 'run'}];
    var ractive1 = new Ractive({
        el : '#container',
        template : '#template',
        data : {
            superHeroes : xmen
        }
    });
    xmen.push({name : "金刚兔", age : 123, ability : 'eat'});
    xmen.reverse();
    ractive1.update('superHeroes');
    //ractive1.reverse('superHeroes',{name : "金刚兔", age : 123, ability : 'eat'} );
    //ractive1.reverse('superHeroes');
</script>