[英]Accessing a Riot.js tag's properties from the DOM
I'm playing with Riot.js and everything is working great. 我正在玩Riot.js,一切都很好。 But let's say I have a page where I mounted this single tag:
但是,假设我有一个页面,我安装了这个标签:
<so-example>
<input type="text />
<script>
this.disabled = false
</script>
</so-example>
Let's say I want to query this element for one of its properties (eg if it's disabled). 假设我想查询此元素的一个属性(例如,如果它被禁用)。 Neither of these two approaches work:
这两种方法都不起作用:
document.getElementsByTagName('so-example')[0].disabled
document.querySelector('so-example').disabled
Both of these statements return undefined
. 这两个语句都返回
undefined
。 I want my tag's DOM API to reflect its state, but can't figure out what I'm missing here. 我希望我的标签的DOM API能够反映其状态,但无法弄清楚我在这里缺少什么。
For anyone who finds themselves in the same situation, the answer is to query the _tag
property on the element. 对于发现自己处于相同情况的任何人,答案是查询元素上的
_tag
属性。 To access the disabled
property of the element I used in my original question, you could do this: 要访问我在原始问题中使用的元素的
disabled
属性,您可以这样做:
document.querySelector('so-example')._tag.disabled
And that should return the expected false
. 这应该返回预期的
false
。 Anything that's defined on this
within the component can be accessed this way. 这对任何定义
this
组件内可以访问这种方式。
I may be wrong for I have never used riot.js and it could do some kind of magic compilation that does that for you, but I doubt it, that sounds like overkill... 我可能错了,因为我从来没有使用过riot.js,它可以做一些为你做的魔法编译,但我怀疑它,听起来有点过分......
Attributes on custom elements don't get bound to their JS representation. 自定义元素的属性不会绑定到它们的JS表示。 You can't use
.disable
as a shortcut because the querySelector or getElementByWhatever function returns a HTMLUnknownElement
which doesn't have any bound attributes. 您不能使用
.disable
作为快捷方式,因为querySelector或getElementByWhatever函数返回没有任何绑定属性的HTMLUnknownElement
。 So you have to use getAttribute('disabled');
所以你必须使用
getAttribute('disabled');
or hasAttribute('disabled');
或
hasAttribute('disabled');
instead. 代替。
It´s depends from where you want to access the property. 这取决于您想要访问该物业的位置。 For instance if it´s from a parent tag, then you can go with.
例如,如果它来自父标签,那么你可以使用。
this.tags.child.message
(to access the message property from the child) this.tags.child.message
(从子this.tags.child.message
访问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>
If you want to access from index.html, you should wrap the mount with riot.compile
like this 如果你想从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>
Here is a working example http://plnkr.co/edit/mjLlDozVzzfcv3Nwl63Y?p=preview 这是一个工作示例http://plnkr.co/edit/mjLlDozVzzfcv3Nwl63Y?p=preview
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.