纯新手求解，wex5的显隐问题

linai486

<?xml version="1.0" encoding="utf-8"?>

<div xmlns="http://www.w3.org/1999/xhtml" component="$UI/system/components/justep/window/window" design="device:mobile">  
  <div component="$UI/system/components/justep/model/model" xid="model" style="width:143px;height:auto;left:10px;top:6px;"
    onLoad="model1Load">
    <div component="$UI/system/components/justep/data/data" autoLoad="true"
      xid="userData" idColumn="id">
      <column label="tid" name="tid" type="String" xid="xid1"/>  
      <column label="pass" name="pass" type="String" xid="xid2"/>  
      <column label="input1" name="input1" type="String" xid="xid3"/>  
      <column label="input2" name="input2" type="String" xid="xid4"/>  
      <column label="input3" name="input3" type="String" xid="xid5"/>  
      <column label="id" name="id" type="String" xid="xid6"/>  
      <rule xid="rule1">
        <col name="tid" xid="ruleCol1">
          <required xid="required1">
            <message xid="default1"/>  
            <expr xid="default7"/>
          </required>
        </col>  
        <col name="pass" xid="ruleCol2">
          <required xid="required2">
            <message xid="default2"/>  
            <expr xid="default8"/>
          </required>
        </col>  
        <col name="input1" xid="ruleCol3">
          <required xid="required3">
            <message xid="default3"/>  
            <expr xid="default9"/>
          </required>
        </col>  
        <col name="input2" xid="ruleCol7">
          <required xid="required7">
            <message xid="default7"/>  
            <expr xid="default13"/>
          </required>
        </col>  
        <col name="input3" xid="ruleCol8">
          <required xid="required8">
            <message xid="default8"/>  
            <expr xid="default14"/>
          </required>
        </col>  
        <col name="username" xid="ruleCol4">
          <required xid="required4">
            <message xid="default4"/>  
            <expr xid="default10"/>
          </required>
        </col>  
        <col name="createtime" xid="ruleCol5">
          <required xid="required5">
            <expr xid="default5">justep.Date.STANDART_FORMAT</expr>
          </required>
        </col>  
        <col name="repass" xid="ruleCol6">
          <required xid="required6">
            <message xid="default6"/>  
            <expr xid="default12"/>
          </required>
        </col>
      </rule>
    </div>
  </div>  
  <span component="$UI/system/components/justep/messageDialog/messageDialog"
    xid="messageDialog" style="left:20px;top:21px;"/>  
  <div component="$UI/system/components/justep/panel/panel" class="x-panel x-full"
    style="background-color:#F5FFE8;">
    <!-- <div component="$UI/system/components/justep/contents/contents" class="x-contents x-full"
    active="0" xid="contents1" style="background-color:#BFF3F4;" wrap="true" swipe="false" slidable="true" routable="true"> -->  
    <div class="x-panel-content" xid="content1" >
      <div xid="div1" align="center">
        <img src="img/nanyuan.png" alt="" xid="image1" style="heigth:50%;width:50%;"/>
      </div>  
      <br/>  
      <div class="form-vertical" component="$UI/system/components/bootstrap/form/form"
        xid="form1">
        <div  class="form-group" style="margin-right:auto;margin-left:auto;width:92%;">
          <label  class="sr-only"><![CDATA[用户帐号]]></label>  
          <div class="input-group">
            <div  class="input-group-addon">
              <span class="glyphicon glyphicon-user"/>
            </div>  
            <input component="$UI/system/components/justep/input/input" class="form-control"
              xid="tid" placeHolder="请输入帐号" autoFocus="true"/>
          </div>
        </div>  
        <div xid="div13" class="form-group" style="margin-right:auto;margin-left:auto;width:92%;" >
          <label  class="sr-only"><![CDATA[身份证号]]></label>  
          <div  class="input-group">
            <div  class="input-group-addon">
              <span class="glyphicon glyphicon-edit"/>
            </div>  
            <input component="$UI/system/components/justep/input/input" class="form-control"
              xid="pass" placeHolder="请输入身份证号" />
          </div>
        </div>  
        <div bind-visible="$model.getItems('pass')">
          <div component="$UI/system/components/justep/row/row" class="x-row"
            xid="row2" style="padding:0;margin-right:auto;margin-left:auto;width:92%;">
            <div  class="form-group" style=";margin-right:auto;margin-left:auto;width:100%;">
              <input component="$UI/system/components/justep/input/input" class="form-control"
                xid="input1" placeHolder="请确认区" autoFocus="true" readonly="true"/>
            </div>  
            <div  class="form-group" style="padding:0;width:100%;height:100%;">
              <input component="$UI/system/components/justep/input/input" class="form-control"
                xid="input2" placeHolder="请确认栋" autoFocus="true" readonly="true"/>
            </div>
            <div  class="form-group" style="padding:0;width:100%;height:100%;">
              <input component="$UI/system/components/justep/input/input" class="form-control"
                xid="input3" placeHolder="请确认房号" autoFocus="true" readonly="true"/>
            </div>
          </div>  
           
      </div>  
        
      
  </div>
  <div component="$UI/system/components/justep/row/row" class="x-row" xid="row4">
          <div component="$UI/system/components/justep/button/button" class="btn x-red" style="margin:auto;border:0;width:95%;color:#FFF000;" label="登录" xid="button1" onClick="btnCheckUserLogin">
            <i xid="i1" />  
            <span xid="span1">登录</span>
        </div>
      </div><div component="$UI/system/components/justep/labelEdit/labelEdit" class="x-label-edit x-label30" xid="labelToggle2" style="margin-right:-150%;">
        <label class="x-label" xid="label3" style="text-align:right;"><![CDATA[记住密码]]></label>  
        <span component="$UI/system/components/justep/button/toggle" class="x-toggle x-edit" xid="toggle1" ON="开启" OFF="关闭" style="text-align:right;" />
      </div></div>
</div>
</div>










Model.prototype.getItems = function(event){
        if ($.trim(this.comp('tid').val()) === "" || $.trim(this.comp('pass').val()) === "" ) {
                        this.shouldShowMessage = justep.Bind.observable(false);
                } else {
                         this.shouldShowMessage = justep.Bind.observable(true);
    }
   
   
   
   
                };




怎么才能在，身份框无值时，区.栋.房号隐藏；身份框有值时，区.栋.房号显示。直接填完身份框的值就执行的，不会用到按钮的

liangyongfei

参考：http://bbs.wex5.com/forum.php?mo ... t=shouldShowMessage

linai486

liangyongfei 发表于 2015-11-17 10:54
参考：http://bbs.wex5.com/forum.php?mod=viewthread&tid=81198&highlight=shouldShowMessage

大哥，这就是我写的。。。我的还是有些问题，可以隐藏，但是显示不成功

linai486

liangyongfei 发表于 2015-11-17 10:54
参考：http://bbs.wex5.com/forum.php?mod=viewthread&tid=81198&highlight=shouldShowMessage

加个QQ把，好聊些，可以吗

linai486

是不是我的代码出了问题的，怎么改比较好，急求解，

liangyongfei

linai486 发表于 2015-11-17 11:18
是不是我的代码出了问题的，怎么改比较好，急求解，

最重要的代码就是这块：http://bbs.wex5.com/forum.php?mo ... 8&pid=165188122

只要你设置为ｆａｌｓｅ可以隐藏。，设置为ｔｒｕｅ就绝对可以显示！

yuetao

.w代码：
            <input component="$UI/system/components/justep/input/input" class="form-control"
              xid="pass" placeHolder="请输入身份证号" onChange="getItems"/>
          </div>
        </div>  
        <div bind-visible="shouldShowMessage">
          <div component="$UI/system/components/justep/row/row" class="x-row"

js代码：
        var Model = function() {
                this.callParent();
                this.shouldShowMessage = justep.Bind.observable(false);
        };

        Model.prototype.getItems = function(event) {
                if ($.trim(this.comp('tid').val()) === ""
                || $.trim(this.comp('pass').val()) === "") {
                        this.shouldShowMessage.set(false);
                } else {
                        this.shouldShowMessage.set(true);
                }
        };

linai486

yuetao 发表于 2015-11-17 13:00
.w代码：

谢谢，我来试试

linai486

yuetao 发表于 2015-11-17 13:00
.w代码：

谢谢，终于可以成功了

yuetao

注意点：
1、shouldShowMessage是个bool对象，被bind到div的visible上。
2、shouldShowMessage对象的创建要写在构造函数里。
3、shouldShowMessage对象的赋值用set(true/false)，取值用get()。
4、getItems 是用来根据 pass 域值变化影响 div 是否显示的：
因是 input.pass.onChange
果是  this.shouldShowMessage.set(true/false)----->通过bind起作用
所以，你bind到div的visible上的是shouldShowMessage而不是getItems