2016-10-13 2 views
2

私はRiot.jsで遊んでいて、すべてがうまくいきます。しかし、聞かせてのは、私がこの単一のタグを取り付けられたページを持っていると言う:DOMからRiot.jsタグのプロパティにアクセス

<so-example> 

    <input type="text /> 

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

</so-example> 

のは、私は、そのプロパティの1(例えば、それが無効の場合)のために、この要素を照会したいとしましょう。これら2つのアプローチのどちらも動作します。これらの文の

  1. document.getElementsByTagName('so-example')[0].disabled
  2. document.querySelector('so-example').disabled

両方をundefinedを返します。私は自分のタグのDOM APIにその状態を反映させたいが、私がここで何が欠けているのか分からない。

答えて

2

同じ状況で自分自身を見つけた場合は、要素の_tagプロパティを照会することです。

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

をそして、それは期待falseを返す必要があります:私は私の元の質問に用いた素子のdisabledプロパティにアクセスするには、これを行うことができます。コンポーネント内でthisに定義されているものには、この方法でアクセスできます。

+0

このソリューションは標準のriot.js APIを使用していないため、今後の予定ではない可能性があります。将来の暴動の実装では、 '_tag'はそれが現在のものであるとは立証しないかもしれません。 @vitomd: 'var s;で与えられた解を2番目に指定します。 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

これは、プロパティにアクセスする場所によって異なります。たとえば、親タグからのものなら、あなたは一緒に行くことができます。 this.tags.child.message(子からのメッセージプロパティにアクセスするため)

<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> 

あなたはindex.htmlをからアクセスしたい場合は、ここでriot.compile

このような
<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> 

でマウントをラップする必要がある作業例http://plnkr.co/edit/mjLlDozVzzfcv3Nwl63Y?p=previewです

関連する問題