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

Question

我和Riot.js一起玩，一切都很顺利。但是假设我有一个页面，我在其中挂载了这个标签：

<so-example>

  <input type="text />

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

</so-example>

假设我想查询该元素的一个属性(例如，如果禁用的话)。这两种方法都不起作用：

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

这两个语句都返回undefined。我希望标记的DOM能够反映它的状态，但是我不知道我在这里缺少了什么。

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包装挂载

<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