起步软件技术论坛
搜索
 找回密码
 注册

QQ登录

只需一步，快速开始

起步软件技术论坛»论坛 › 开发者论坛 › WeX5开发者论坛 › 关于getElementByXid的问题
返回列表 发新帖
查看: 955|回复: 3

[处理中2] 关于getElementByXid的问题

[复制链接]

1

主题

2

帖子

8

积分

新手上路

Rank: 1

积分
8
QQ
发表于 2016-5-11 09:22:48 | 显示全部楼层 |阅读模式
最近在处理chart时碰到一个问题，通过this.getElementByXid("xxxx")返回的总是null，研究并搜索未果。反复测试，发现一些问题。不知是是用方法不对还是其他什么原因，贴出来，请达人指教。
test.js:
  1. define(function(require){
  2.         var $ = require("jquery");
  3.         var justep = require("$UI/system/lib/justep");
  4.         var echarts = require("$UI/echarts/dist/echarts.min");
  5.         var Model = function(){
  6.                 this.callParent();
  7.         };
  8.         Model.prototype.button1Click = function(event){
  9.                 alert(this.getElementByXid("inputTest"));
  10.         };
  11.         Model.prototype.content1Load = function(event){
  12.                 alert("in load :" + this.getElementByXid("inputTest"));
  13.         };
  14.         Model.prototype.content2Active = function(event){
  15.                 alert("in active :" + this.getElementByXid("inputTest"));
  16.         };
  17.         return Model;
  18. });
复制代码


test.w 源文件 ［元素放在content前面］
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <div xmlns="http://www.w3.org/1999/xhtml" component="$UI/system/components/justep/window/window" design="device:m;" xid="window" class="window">  
  3.   <div component="$UI/system/components/justep/model/model" xid="model" style="left:18px;top:83px;height:244px;">
  4.   </div>  
  5.   <div component="$UI/system/components/justep/panel/panel"
  6.     class="x-panel x-full" xid="panel1">
  7.       <div class="x-panel-top" xid="top1">
  8.         <div component="$UI/system/components/justep/titleBar/titleBar" title="标题"
  9.           class="x-titlebar">
  10.           <div class="x-titlebar-left">
  11.             <a component="$UI/system/components/justep/button/button"
  12.               label="" class="btn btn-link btn-only-icon" icon="icon-chevron-left"
  13.               onClick="{operation:'window.close'}" xid="backBtn">
  14.               <i class="icon-chevron-left"/>  
  15.               <span></span>
  16.             </a>
  17.           </div>  
  18.           <div class="x-titlebar-title">标题</div>  
  19.           <div class="x-titlebar-right reverse">
  20.           </div>
  21.         </div>
  22.       </div>  
  23.     <div class="x-panel-content" xid="content1" bind-load="content1Load">
  24.   
  25.   <input component="$UI/system/components/justep/input/input" class="form-control" xid="inputTest" dataType="String"></input><div component="$UI/system/components/justep/contents/contents" class="x-contents x-full" active="0" xid="contents1">
  26.    <div class="x-contents-content" xid="content2" onActive="content2Active"><a component="$UI/system/components/justep/button/button" class="btn btn-default" label="button" xid="button1" onClick="button1Click">
  27.    <i xid="i1"></i>
  28.    <span xid="span1"></span></a></div></div></div>
  29.   </div>
  30. </div>
复制代码


test.w 源文件 元素放在content1后面
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <div xmlns="http://www.w3.org/1999/xhtml" component="$UI/system/components/justep/window/window" design="device:m;" xid="window" class="window">  
  3.   <div component="$UI/system/components/justep/model/model" xid="model" style="left:18px;top:83px;height:244px;">
  4.   </div>  
  5.   <div component="$UI/system/components/justep/panel/panel"
  6.     class="x-panel x-full" xid="panel1">
  7.       <div class="x-panel-top" xid="top1">
  8.         <div component="$UI/system/components/justep/titleBar/titleBar" title="标题"
  9.           class="x-titlebar">
  10.           <div class="x-titlebar-left">
  11.             <a component="$UI/system/components/justep/button/button"
  12.               label="" class="btn btn-link btn-only-icon" icon="icon-chevron-left"
  13.               onClick="{operation:'window.close'}" xid="backBtn">
  14.               <i class="icon-chevron-left"/>  
  15.               <span></span>
  16.             </a>
  17.           </div>  
  18.           <div class="x-titlebar-title">标题</div>  
  19.           <div class="x-titlebar-right reverse">
  20.           </div>
  21.         </div>
  22.       </div>  
  23.     <div class="x-panel-content" xid="content1" bind-load="content1Load">
  24.   
  25.   <div component="$UI/system/components/justep/contents/contents" class="x-contents x-full" active="0" xid="contents1">
  26.    <div class="x-contents-content" xid="content2" onActive="content2Active"><a component="$UI/system/components/justep/button/button" class="btn btn-default" label="button" xid="button1" onClick="button1Click">
  27.    <i xid="i1"></i>
  28.    <span xid="span1"></span></a></div></div><input component="$UI/system/components/justep/input/input" class="form-control" xid="inputTest" dataType="String"></input></div>
  29.   </div>
  30. </div>
复制代码


test.w 源文件元素放在content里面
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <div xmlns="http://www.w3.org/1999/xhtml" component="$UI/system/components/justep/window/window" design="device:m;" xid="window" class="window">  
  3.   <div component="$UI/system/components/justep/model/model" xid="model" style="left:18px;top:83px;height:244px;">
  4.   </div>  
  5.   <div component="$UI/system/components/justep/panel/panel"
  6.     class="x-panel x-full" xid="panel1">
  7.       <div class="x-panel-top" xid="top1">
  8.         <div component="$UI/system/components/justep/titleBar/titleBar" title="标题"
  9.           class="x-titlebar">
  10.           <div class="x-titlebar-left">
  11.             <a component="$UI/system/components/justep/button/button"
  12.               label="" class="btn btn-link btn-only-icon" icon="icon-chevron-left"
  13.               onClick="{operation:'window.close'}" xid="backBtn">
  14.               <i class="icon-chevron-left"/>  
  15.               <span></span>
  16.             </a>
  17.           </div>  
  18.           <div class="x-titlebar-title">标题</div>  
  19.           <div class="x-titlebar-right reverse">
  20.           </div>
  21.         </div>
  22.       </div>  
  23.     <div class="x-panel-content" xid="content1" bind-load="content1Load">
  24.   
  25.   <div component="$UI/system/components/justep/contents/contents" class="x-contents x-full" active="0" xid="contents1">
  26.    <div class="x-contents-content" xid="content2" onActive="content2Active"><a component="$UI/system/components/justep/button/button" class="btn btn-default" label="button" xid="button1" onClick="button1Click">
  27.    <i xid="i1"></i>
  28.    <span xid="span1"></span></a><input component="$UI/system/components/justep/input/input" class="form-control" xid="inputTest" dataType="String"></input></div></div></div>
  29.   </div>
  30. </div>
复制代码


三种情况比较：
当元素放在content之前，能getElementByXid能获取到对象；
当元素放在content之后或者放在里面，getElementByXid就获取到null。

求解。
回复

使用道具 举报

12

主题

2627

帖子

2866

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2866
发表于 2016-5-11 14:04:01 | 显示全部楼层
原因： content的onActive事件是在那个content组件加载时触发，而在加载content组件时， 如果input组件在content里或后面时， 由于input组件还没有加载， 所以会出现getElementByXid返回null的情况。
无论写在什么位置， 当点Button时， 都可以取到相应的Element
回复 支持 反对

使用道具 举报

1

主题

2

帖子

8

积分

新手上路

Rank: 1

积分
8
QQ
 楼主| 发表于 2016-5-11 14:53:34 | 显示全部楼层
本帖最后由 lzwyeher 于 2016-5-11 14:55 编辑

在页面生命周期
中描述页面的加载

页面创建时，分成以下步骤：
1)页面准备：负责加载页面，创建组件实例，执行数据绑定初始化；
2)触发onModelConstrut事件：触发Model开发构造事件；
3)Data加载：Model中的Data加载数据；
4)触发onModelConstructDone事件：触发Model构造完成事件；
5)触发onLoad事件：触发页面加载完事件；
6)触发onParamsReceive事件：触发页面接收参数事件；
7)触发onActive事件：触发页面激活事件；

onActive 是在onLoad之后，这个时候应当是整个页面都加载完了，才开始active事件的，此时input应当能被检测到才对。

另外，如果不能使用onactive，我在什么事件中才能在第1，2，3中情况中都正常的检测到元素input ?(button 只是测试用，实际的页面中没有这个button)

谢谢。
回复 支持 反对

使用道具 举报

12

主题

2627

帖子

2866

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2866
发表于 2016-5-11 15:03:53 | 显示全部楼层
注意， 你这里用的是content上的onActive事件， 而不是model组件上的onActive事件,
你应该使用model组件上的onActive事件
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 注册

本版积分规则

小黑屋|手机版|X3技术论坛|Justep Inc.    

GMT+8, 2024-5-1 19:37 , Processed in 0.068397 second(s), 23 queries .

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表