从 DOM 访问 Riot.js 标签的属性

Question

我正在玩 Riot.js，一切正常。但是假设我有一个页面，我在其中安装了这个单个标签：

<so-example>

  <input type="text />

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

</so-example>

假设我想查询此元素的其中一个属性（例如，如果它被禁用）。这两种方法都不起作用：

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

这两个语句 return undefined。我想让我的标签 DOM API 反映它的状态，但不知道我在这里遗漏了什么。

Answer 1

我可能是错的，因为我从未使用过 riot.js，它可以为您做一些神奇的编译，但我对此表示怀疑，这听起来有点矫枉过正...

自定义元素的属性不会绑定到它们的 JS 表示。您不能使用 .disable 作为快捷方式，因为 querySelector 或 getElementByWhatever 函数 returns a HTMLUnknownElement 没有任何绑定属性。所以你必须使用 getAttribute('disabled'); 或 hasAttribute('disabled'); 来代替。

Answer 2

这取决于您想从哪里访问属性。例如，如果它来自 parent 标签，那么你可以继续。 this.tags.child.message（从 child 访问消息属性）

<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

Answer 3

对于发现自己处于相同情况的任何人，答案是查询元素上的 _tag 属性。要访问我在原始问题中使用的元素的 disabled 属性，您可以这样做：

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

这应该 return 预期的 false。组件内 this 上定义的任何内容都可以通过这种方式访问。

从 DOM 访问 Riot.js 标签的属性

Accessing a Riot.js tag's properties from the DOM

javascript

riot.js

riot