Làm thế nào để truy cập vào phần tử con trong riot.js

Question

Nếu tôi có một thẻ tùy chỉnh riot với một p trong nó như thế này:

<custom> 
    <p>This is a text</p> 
</custom> 

Làm thế nào để truy cập vào các yếu tố <p> từ bên trong thẻ <custom>?

Cập nhật: Tôi đã nhận được một loạt câu trả lời là cách để chọn từ DOM. Những gì tôi muốn là một cách để chọn thẻ bên trong p từ bên trong thư viện thành phần riot.js. Tôi đang tìm kiếm một câu trả lời cụ thể hơn riotjs. Ví dụ: polymer bạn sử dụng this.$.content.getDistributedNodes().

Answer 1

Riot chỉ cung cấp 4 thuộc tính để truy cập dữ liệu từ thẻ hiện tại bạn đang ở:

• this.opts
• this.parent
• this.root
• điều này.thẻ

See the API docs

chỉnh sửa

Bên cạnh đó bạn có thể truy cập trực tiếp named elements:

<my-tag> 
    <p name="foo">Hi, I'm foo</p> 
    <script> 
    console.log(this.foo); 
    </script> 
</my-tag> 

see the docs

/chỉnh sửa

Không có tham chiếu trực tiếp đến bất kỳ yếu tố nào bạn đã xác định trong thẻ tùy chỉnh của mình; phần còn lại đi xuống chỉ JS cũ tinh khiết (mà bạn có thể ủng hộ hay không).

Giống như những người khác đã nêu, bạn có thể truy cập các yếu tố bằng cách sử dụng phương pháp dom. Tuy nhiên, trong một số trường hợp, bạn cần đợi cho đến khi DOM thực sự được tải. Ví dụ:

<my-tag> 
    <p>yada</p> 
    <script> 
    console.log(this.root.querySelector('p')) 
    </script> 
</my-tag> 

sẽ không hoạt động do DOM chưa sẵn sàng. Thay vào đó, hãy chọn công cụ chọn trong trình xử lý sự kiện 'gắn kết' như sau:

<my-tag> 
    <p>yada</p> 
    <script> 
    this.on('mount', function() { 
     console.log(this.root.querySelector('p')) 
    }) 
    </script> 
</my-tag> 

Answer 2

Các bạn đã thử:

nodes = document.getElementsByTagName('custom'); 
for (var i = 0; i< nodes.length; ++i) { 
    paragraphs = nodes[i].getElementsByTagName('p'); 
    alert(paragraphs[0].innerText); 
} 

getElementsByTagName trả về một Bộ sưu tập HTML mà bạn có thể tiếp tục truy vấn: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection

Dưới đây là một fiddle nhanh chóng và dơ bẩn: http://jsfiddle.net/markm/m8n3huLn/

Answer 3

querySelector dường như làm việc với các thẻ tùy chỉnh :

document.querySelector('custom p').innerHTML= 'Test complete';

<p>This is a test</p> 
 
<custom> 
 
    <p>This is a test</p> 
 
</custom> 
 
<p>This is a test</p>

Answer 4

Xem Tag instance.

Chúng tôi có thể truy cập vào children.

customTagAndLoops = this.children 

Ngoài ra để DOM qua root.

iAmDom = this.root 
childNodes = this.root.childNodes 
p = this.root.querySelector('p') 

CẬP NHẬT - Tháng 14, 2015

children tài sản là lỗi thời trong Riot.js v2.0.9. Cách duy nhất để truy cập các phần tử con là sử dụng root.

Answer 5

Nếu bạn thêm thuộc tính id hoặc tên vào thẻ bên trong của mình, bạn có thể truy cập nó qua self.

// with 'id' 
<custom><p id="pTest">Test</p></custom> 

// with 'name' 
<custom><p name="pTest">Test</p></custom> 

phần js:

self = this 

self.pTest 
>> <p id=pTest>Test</p> 

Tested trong Riot v2.0.10

Answer 6

Riotjs trong các phiên bản mới nhất có tính năng Yielding nested HTML. See the API docs

Trong trường hợp của bạn, bạn có thể dễ dàng làm điều đó theo cách này:

Trong định nghĩa tag:

<custom> 
<!-- tag markup--> 
<div id="place for custom html"> 
    <yield/> 
</div> 
</custom> 

Trong ứng dụng của bạn:

<custom> 
    <p>This is a text</p> 
</custom> 

rendered html:

<custom> 
    <div id="place for custom html"> 
    <p>This is a text</p> 
    </div> 
</custom> 

Từ các tài liệu

Thẻ <yield> cũng cung cấp một cơ chế khe cắm cho phép bạn tiêm nội dung html trên khe cắm cụ thể trong các mẫu

Answer 7

Các RiotJs Cheatsheet gợi ý sử dụng năng suất , nếu tôi đã hiểu rõ tình trạng tiến thoái lưỡng nan của bạn một cách chính xác.

khai thẻ chính:

<element-i-will-call> 

    <span>I am a title</span> 

    <element-child-as-container> 
    <yield to='header'>Hello User</yield> 
    <yield to='conent'>You are here</yield> 
    </element-child-as-container> 

</element-i-will-call> 

Child thẻ khai:

<element-child-as-container> 

    <h2> 
    <yield from='header'/> 
    </h2> 

    <div> 
    <yield from='conent'/> 
    </div> 

</element-child-as-container> 

thực hiện chi tiết:

<html> 
<head> 
    ... 
</head> 
<body> 
    <element-i-will-call /> 
</body> 
</html 

Answer 8

Trong cuộc bạo loạn 3.4.2 bạn có thể thêm một thuộc tính ref để các yếu tố bên trong mà bạn muốn ej:

<custom> 
    <p ref="myP">This is a text</p> 
</custom> 
... 

// in js 
this.refs.myP