代码之家 › 专栏 › 技术社区 › bjork24

接近暴乱。来自DOM的js标记属性

riot riot.js javascript

3

bjork24 · 技术社区 · 8 年前

我在玩暴动。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反映其状态,但无法找出这里缺少了什么。

3 回复 | 直到 8 年前

1

3

bjork24 8 年前

对于发现自己处于相同情况的任何人,答案是询问 _tag 元素上的属性。访问 disabled 属性,您可以这样做:

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

这将返回预期值 false .任何定义的 this 可以通过这种方式访问组件中的。

2

0

Domino 8 年前

我可能错了,因为我从未使用过暴乱。js和它可以做一些神奇的编译,为你做到这一点,但我怀疑,这听起来像是过度杀戮。。。

自定义元素上的属性不会绑定到其JS表示。你不能用 .disable 作为快捷方式,因为querySelector或GetElementByWhere函数返回 HTMLUnknownElement 它没有任何绑定属性。所以你必须使用 getAttribute('disabled'); hasAttribute('disabled'); 相反

3

0

vitomd 8 年前

这取决于您要从何处访问属性。例如,如果它来自父标记,则可以使用。 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>

如果要从索引访问。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