如何在rivets.js中打印数组

Question

我有数据

 data = [{
     "task": "get milk",
     "who": "Scott",
     "done": false
 }, {
     "task": "get broccoli",
     "who": "Elisabeth",
     "done": false
 }, {
     "task": "get
 garlic",
     "who": "Trish",
     "done": false
 }, {
     "task": "get
 eggs",
     "who": "Josh",
     "done": true
 }];



 <ul>
    <li data-each-[]="">
    </li>
 <ul>

如何在rivets.js中打印这些数据

Answer 1

我想下面的例子对你有帮助。

<ul id="playersList">
  <li rv-each-player="players">
    <dl>
        <dt>Name:</dt><dd>{ player.name }</dd>
        <dt>Surname:</dt><dd>{ player.surname }</dd>
        <dt>Shirt Number:</dt><dd>{ player.number }</dd>
        <!-- This element will be rendered only if this property will be set -->
        <dd rv-if="player.captain"><b> Captain! </b></dd>
    </dl>
  </li>
</ul>

Javascript：

var soccerTeam = [{"number":1,"name":"Gianluigi","surname":"Buffon"},
                  {"number":19,"name":"Gianluca","surname":"Zambrotta"},
                  {"number":5,"name":"Fabio","surname":"Cannavaro","captain":true},
                  {"number":9,"name":"Luca","surname":"Toni"}];

// get the DOM elements
var playersList = document.getElementById('playersList');

// pass the data to the DOM element
rivets.bind(playersList,{players:soccerTeam});

此外，此链接还可以帮助您：http://www.gianlucaguarini.com/blog/rivet-js-backbone-js-made-my-code-awesome/

Answer 2

快速的方法：

<ul>
  <li rv-each-data="item">
    <dl>
        <dt>Task:</dt><dd>{ item.task }</dd>
        <dt>Who:</dt><dd>{ item.who}</dd>
        <dt>Done:</dt><dd>{ item.done}</dd>
    </dl>
  </li>
</ul>