12

次のようなカスタムriotタグがある場合p：

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

タグ<p>内から要素にアクセスするにはどうすればよいですか?<custom>

更新： DOMから選択する方法について、たくさんの回答を受け取りました。私が欲しいのは、コンポーネント ライブラリriot.js自体pの中から内側のタグより riotjs 固有の回答を探しています。たとえば、ポリマーの場合は を使用。this.$.content.getDistributedNodes()

4

9 に答える 9

18

Riot は、現在のタグからデータにアクセスするための 4 つのプロパティのみを提供します。

  • this.opts
  • this.parent
  • this.root
  • このタグ

API ドキュメントを参照してください

編集

これに加えて、直接アクセスできますnamed elements：

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

ドキュメントを参照してください

/編集

custom-tag で定義した要素への直接参照はありません。残りは、純粋な古い JS に帰着します (どちらを好むか好まないかは別として)。

他の人が述べたように、dom メソッドを使用して要素にアクセスできます。ただし、場合によっては、DOM が実際にロードされるまで待つ必要があります。例えば：

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

DOM がまだ準備できていないため、機能しません。代わりに、次のように「マウント」イベント リスナーでセレクターをラップします。

<my-tag>
  <p>yada</p>
  <script>
    this.on('mount', function() {
      console.log(this.root.querySelector('p'))
    })
  </script>
</my-tag>
于 2015-03-30T20:26:51.813 に答える
7

内部タグに id または name 属性を追加すると、 経由でアクセスできますself。

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

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

js部分：

self = this

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

Riot v2.0.10でテスト済み

于 2015-02-19T12:02:03.307 に答える
5

タグ インスタンスを参照してください。

にアクセスできますchildren。

customTagAndLoops = this.children

また、 経由で DOM へroot。

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

更新 - 2015 年 2 月 14 日

childrenプロパティは Riot.js v2.0.9 で廃止されました。子要素にアクセスする唯一の方法は、root.

于 2015-02-10T23:48:21.400 に答える
0

RiotJs Cheatsheetは、あなたのジレンマを正しく理解していれば、yield を使用することを提案しています。

主なタグ宣言:

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

子タグの宣言:

<element-child-as-container>

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

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

</element-child-as-container>

主な実装:

<html>
<head>
    ...
</head>
<body>
    <element-i-will-call />
</body>
</html
于 2016-11-30T11:56:36.507 に答える