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

这两个语句都返回undefined。我希望我的标记的DOM API能够反映其状态，但无法弄清楚我在这里缺少的内容。

Answer 1

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

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

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

Answer 2

我可能错了，因为我从来没有使用过riot.js，它可以做某种神奇的编译，为你做到这一点，但我怀疑它，听起来有点矫枉过正......

自定义元素的属性不会绑定到他们的JS表示。您不能使用.disable作为快捷方式，因为querySelector或getElementByWhatever函数返回的HTMLUnknownElement没有任何绑定属性。因此，您必须改为使用getAttribute('disabled');或hasAttribute('disabled');。

Answer 3

这取决于您要访问该属性的位置。例如，如果它来自父标签，那么你可以使用。 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这样的

包装mount

<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

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

3 个答案: