RIOT.JS-루프

프리미티브 또는 객체의 RIOT 배열을 반복하고 이동 중에 html 요소를 생성 / 업데이트 할 수 있습니다. "각"구조를 사용하여 우리는 그것을 달성 할 수 있습니다.

Create array − 객체 배열을 생성합니다.

this.cities = [
   { city : "Shanghai" , country:"China" , done: true },
   { city : "Seoul"    , country:"South Korea" },
   { city : "Moscow"   , country:"Russia"      }
];

Add each attribute − 이제 "each"속성을 사용하십시오.

<ul>
   <li each = { cities } ></li>
</ul>

Iterate array of objects − 객체 속성을 사용하여 배열을 반복합니다.

<input type = "checkbox" checked = { done }> { city } - { country }

예

다음은 완전한 예입니다.

custom7Tag.tag

<custom7Tag>
   <style>
      ul {
         list-style-type: none;
      }
   </style>
   <ul>
      <li each = { cities } >
         <input type = "checkbox" checked = { done }> { city } - { country }
      </li>
   </ul>
   <script>
      this.cities = [
         { city : "Shanghai" , country:"China" , done: true },
         { city : "Seoul"    , country:"South Korea" },
         { city : "Moscow"   , country:"Russia"      }
      ]; 
   </script>
</custom7Tag>

custom7.htm

<html>
   <head>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
   </head>
   <body>
      <custom7Tag></custom6Tag>
      <script src = "custom7Tag.tag" type = "riot/tag"></script>
      <script>
         riot.mount("custom7Tag");
      </script>
   </body>
</html>

이것은 다음 결과를 생성합니다-