빌드 방법
Riot는 기본적으로 "커스텀 태그"를 통해 DOM 콘텐츠를 빌드하지만, "riot-tag" 속성을 통해 DOM을 빌드하는 데 사용할 "커스텀 태그"를 지정할 수도 있습니다.
예:
[code] <div riot-tag="todo" title="da宗熊"></div> 等同于: <todo title="da宗熊"></todo>
또는 riot.mount에서 빌드된 요소를 지정할 수 있습니다.
[code]<div id="content"></div> <script> // 给id="content"的元素,构建todo的内容 // 第一个参数,可以是dom元素,too riot.mount("#content", "todo"); </script>
Style
Riot에서 태그를 사용자 정의하세요. 스타일 태그를 사용하여 구성 요소의 스타일을 작성할 수 있습니다. Riot은 모든 스타일 콘텐츠를 head 태그에 삽입하므로 스타일이 반복적으로 정의되는 것에 대해 걱정할 필요가 없습니다.
[code]<!Doctype html> <html> <head> <meta charset="utf-8" /> <script type="text/javascript" src="riot.js"></script> <script type="text/javascript" src="compiler.js"></script> </head> <body> <todo></todo> <todo></todo> </body> <!-- 最前面一定要有空格或TAB --> <script type="riot/tag"> <todo> <label>da宗熊</label> <!-- 自定义样式 --> <style> label{color:#ccc;} </style> </todo> </script> <script type="text/javascript"> riot.mount("todo"); </script> </html>
최종 생성:
todo 태그를 두 번 호출했지만 최종적으로 하나의 스타일만 생성되었습니다.
각 루프
ul 및 ol과 같은 목록을 구현하려면 루프가 반드시 필요합니다. Riot에는 "목록과 유사한" 콘텐츠를 생성하기 위해 루프하는 데 사용되는 각 속성이 내장되어 있습니다. " [우리는 목록과 객체까지 순회할 수 있을 뿐만 아니라].
[code]<!Doctype html> <html> <head> <meta charset="utf-8" /> <script type="text/javascript" src="riot.js"></script> <script type="text/javascript" src="compiler.js"></script> </head> <body> <todo></todo> </body> <!-- 最前面一定要有空格或TAB --> <script type="riot/tag"> <todo> <!-- 遍历列表 --> <ul each={ item in list }> <li>{ item }</li> </ul> <!-- 遍历对象 --> <ul each={ key,value in obj }> <li>{ key }:{ value }</li> </ul> // 列表内容 this.list = [ "内容1", "内容2", "内容3" ]; // 对象内容 this.obj = { name: "da宗熊", age: 26 }; </todo> </script> <script type="text/javascript"> riot.mount("todo"); </script> </html>
는 다음과 같이 생성됩니다.
목록의 내용이 객체인 경우 Riot에서는 빠른 액세스 방법도 제공합니다.
[code]<script type="riot/tag"> <todo> <ul each={ list }> <!-- 这里的 context 已经是 list 咧 --> <li>{ title }</li> </ul> // 列表内容 this.list = [ {title: "第一个"}, {title: "第二个"} ]; </todo> </script>
결과는 다음과 같습니다.
대괄호 표현식 [{ 표현식 }]의 컨텍스트 [이 객체]는 더 이상 레이블의 컨텍스트가 아님을 알 수 있으며, 그러나 현재 항목의 현재 순회 객체가 되었습니다.
각 루프에서 태그의 컨텍스트에 액세스해야 하는 경우 "parent" 키워드를 통해 액세스할 수 있습니다.
예:
[code]<script type="riot/tag"> <todo> <ul each={ items }> <li> <span>{ title }</span> <a onclick={ parent.remove }>删除</a> </li> </ul> this.items = [{title: "da宗熊"}]; remove(e){ // 获取到当前点击, each循环中的item // 这里就是获取到了 {title: "da宗熊"} 这个对象 var item = e.item; var index = this.items.indexOf(item); // 把当前项删掉 // 数组的slice,push等操作,自带了this.update操作,SO,这里省了this.update调用 this.items.splice(index, 1); } </todo> </script>
이벤트 개체에서는 event.item을 통해 현재 각 루프의 현재 개체에 액세스할 수 있습니다.
위는 riot.js 학습 내용입니다. [6] Chowder 2. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 주목해주세요!