如何在A-Frame.js中通过模板组件动态修改文本值

问题根源 #

• 变量名不匹配：模板中使用${txt}获取文本，但实体绑定的是data-value属性，变量名不一致导致值无法传递。
• event-set语法冗余：在event-set__click2中额外添加event: click，而组件通过__click2后缀已经指定触发事件为click，冗余配置导致失效。

修正方案 #

1. 统一模板变量与实体属性 #

将模板中的${txt}替换为${value}，与实体的data-value属性对应：

<script id="link" type="text/html">
  <a-entity class="link"
    geometry="primitive: plane; height: 1; width: 1"
    material="shader: flat; src: ${thumb}"
    event-set__mouseenter="scale: 1.2 1.2 1"
    event-set__mouseleave="scale: 1 1 1"
    event-set__click="_target: #image-360; _delay: 300; material.src: ${src}"
    <!-- 修正变量名并移除冗余的event配置 -->
    event-set__click2="_target: #txt; value: ${value}"
    proxy-event="event: click; to: #image-360; as: fade"
    sound="on: click; src: #click-sound"></a-entity>
</script>

2. 确认实体属性正确传递 #

保持实体的data-value属性不变，确保文本值正确传入模板：

<a-entity template="src: #link" data-src="#cubes" data-thumb="#cubes-thumb" data-value="bosque"></a-entity>
<a-entity template="src: #link" data-src="#city" data-thumb="#city-thumb" data-value="selva"></a-entity>

关键说明 #

event-set组件的命名规则是event-set__[触发事件名]，所以event-set__click2已经明确触发事件为click，无需在属性值内重复声明event: click，否则会干扰组件的正常解析。

内容的提问来源于stack exchange，提问作者Elio Diaz