RIOT.JS - Truy cập DOM

Chúng ta có thể truy cập các phần tử HTML bằng đối tượng refs. Bước đầu tiên, chúng ta thêm thuộc tính ref vào phần tử DOM và truy cập nó bằng cách sử dụng this.ref trong khối script của thẻ.

Attach ref - Thêm thuộc tính ref vào một phần tử DOM.

<button ref = "clickButton">Click Me!</button>

Use the refs object- Bây giờ sử dụng đối tượng refs trong sự kiện mount. Sự kiện này được kích hoạt khi RIOT gắn thẻ tùy chỉnh và nó điền vào đối tượng refs.

this.on("mount", function() {
   this.refs.clickButton.onclick = function(e) {
      console.log("clickButton clicked");
      return false;
   };
})

Thí dụ

Sau đây là ví dụ đầy đủ.

custom6Tag.tag

<custom6Tag>
   <form ref = "customForm">
      <input ref = "username" type = "text" value = "Mahesh"/>
      <button ref = "clickButton">Click Me!</button>
      <input type = "submit" value = "Submit" />
   </form>
   <script>
      this.on("mount", function() {
         this.refs.clickButton.onclick = function(e) {
            console.log("clickButton clicked");
            return false;
         };
         this.refs.customForm.onsubmit = function(e) {
            console.log("Form submitted");
            return false;
         };
      }) 
   </script>
</custom6Tag>

custom6.htm

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

Điều này sẽ tạo ra kết quả sau: