2016-10-13 4 views
2

Riot.js를 가지고 놀고 있으며 모든 것이 잘 작동합니다. 그러나하자 내가이 하나의 태그가 장착 된 페이지가 말 :DOM에서 Riot.js 태그의 속성에 액세스

<so-example> 

    <input type="text /> 

    <script> 
    this.disabled = false 
    </script> 

</so-example> 

의 내가 속성 중 하나 (예를 들어, 무효 인 경우)이 요소를 조회 할 가정 해 봅시다. 이 두 가지 방법 중 어느 것도 작동 :이 문 document.querySelector('so-example').disabled

  1. document.getElementsByTagName('so-example')[0].disabled
  2. undefined을 반환합니다. 내 태그의 DOM API에 상태를 반영하고 싶지만 여기에서 누락 된 내용을 파악할 수 없습니다.

답변

2

동일한 상황에서 스스로를 찾는 모든 사람에게 대답은 요소의 _tag 속성을 쿼리하는 것입니다.

document.querySelector('so-example')._tag.disabled 

을 그리고 그 예상 false를 반환해야합니다 : 내 원래의 질문에 사용 된 요소의 disabled 속성에 액세스하려면이 작업을 수행 할 수 있습니다. 구성 요소 내에 this에 정의 된 내용은 모두이 방법으로 액세스 할 수 있습니다.

+0

이 솔루션은 표준 riot.js API를 사용하지 않으므로 향후 증명이되지 않을 수 있습니다. 폭동의 장래의 실행에서,'_tag '는 그것이 지금 무엇인지를 나타낼 수 없습니다. @vitomd :'var s; riot.compile (function() {s = riot.mount ('so-example') [0];}); console.log (s.disabled);' – ghd

0

내가 riot.js을 사용한 적이 그것은 당신을 위해 수행 마법 편집의 어떤 종류를 할 수있는 내가 잘못 될 수있다,하지만 난 잔인한 사람처럼 소리 그, 그것을 의심 ... 사용자 정의에

속성 요소는 JS 표현에 바인딩되지 않습니다. querySelector 또는 getElementByWhatever 함수는 바운드 특성이없는 HTMLUnknownElement을 반환하기 때문에 .disable을 바로 가기로 사용할 수 없습니다. 따라서 대신 getAttribute('disabled'); 또는 hasAttribute('disabled');을 사용해야합니다.

0

속성에 액세스하려는 위치에 따라 다릅니다. 예를 들어 부모 태그에서 가져온 것이면 함께 갈 수 있습니다. 당신은 index.html 파일에 액세스하려면 this.tags.child.message 당신이 여기이

<script type="text/javascript"> 
    riot.compile(function() { 
     var example_tag = riot.mount('example')[0] 
     var child_tag = example_tag.tags.child 
     console.log('from index: '+child_tag.message) 
    }) 
</script> 

처럼 riot.compile로 마운트를 포장한다,

<example> 
    <child></child> 
    <button onclick={access_child}>access child</button> 
    <script> 
     access_child() { 
     console.log(this.tags.child.message) 
     } 
    </script> 
</example> 

<child> 
    <script> 
     this.message = 'Hello Riot' 
    </script> 
</child> 

를 (자식의 메시지 속성에 액세스하는) 작업 예를 http://plnkr.co/edit/mjLlDozVzzfcv3Nwl63Y?p=preview입니다