Riot.js에 덧붙여서 순환할 때 in을 사용하는 게 좋아요.

10484 단어 riotJavaScript
Riot.js(ver:3.3.12시)의 순환 처리에서 링에 부모의 정보를 계승하는 것은 매우 번거롭기 때문에 필기를 해야 한다.
공식적 방법에서 간단하게 순환을 끼워넣으면 작용역(?)우습게 변하다.
실패의 예
<todo></todo><!-- 表示先 -->

<script type="riot/tag">
<todo>
  <ul>
    <li each={ items } class={ completed: done }>
      <input type="checkbox" checked={ done }> { title }
      <ul if={ child }>
        <li each={ child } class={ completed: done }>
          <input type="checkbox" checked={ done }> { title }
        </li>
      </ul>
    </li>
  </ul>

  this.items = [
    {
        title: 'First item',
        done: true
    },
    {
        title: 'Second item',
        done: true,
        child: [
            {
                title: 'Fourth item'
                // ここは done がない(チェック入れない)
            }
        ]
    },
    {
        title: 'Third item'
    }
  ]
</todo>
</script>
이 같은 결과도 검사done:true의'Forth item'이 없을 것으로 보인다.

아마'Forth item'이 없어서done'Second item'done:true 전파된 것 같아요.
여러 가지 시도를 거쳐 간단한each={ items } 순환이 아니라 in 변수each={ item in items }를 사용했다.
정확한 예
<todo></todo><!-- 表示先 -->

<script type="riot/tag">
<todo>
  <ul>
    <!-- ループに in (for...in) を使うべし -->
    <li each={ item in items } class={ completed: item.done }>
      <input type="checkbox" checked={ item.done }> { item.title }
      <ul if={ item.child }>
        <!-- in を使えば同じキー名でもOK -->
        <li each={ item in item.child } class={ completed: item.done }>
          <input type="checkbox" checked={ item.done }> { item.title }
        </li>
      </ul>
    </li>
  </ul>

  this.items = [
    {
        title: 'First item',
        done: true
    },
    {
        title: 'Second item',
        done: true,
        child: [
            {
                title: 'Fourth item'
                // ここは done がない(チェック入れない)
            }
        ]
    },
    {
        title: 'Third item'
    }
  ]
</todo>
</script>

잘 됐다.

좋은 웹페이지 즐겨찾기