How to print an array in rivets.js

问题

I have data

 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>

How could i print this data in rivets.js with

回答1:

I think below example helps you.

<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});

Also this link helps you: http://www.gianlucaguarini.com/blog/rivet-js-backbone-js-made-my-code-awesome/

回答2:

the quick way:

<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>

来源：https://stackoverflow.com/questions/20756539/how-to-print-an-array-in-rivets-js

标签

javascript

json

rivets.js