闲鱼中选择性别的PopOver效果怎么做？

zjroland

真正的闲鱼中，在选择性别时，会出现一个PopOver，上面一行文字：男性，下面一行文字：女性（注意：不是用select和options做的），点击男或女后，遮罩隐去，性别后面的文字显示男或女，这个效果怎么做出来的？有没有相关的例子？
我下载了闲鱼代码，没有性别的选择。

liangyongfei

是否是popMenu 组件？
/UI2/system/components/justep/popMenu/demo/base.w
点击事件中获取当前点击的dom节点，然后获取值

zjroland

变量改了，文字不随着变化，是怎么回事？file:///D:\Temp\2017-2-16 17-29-35.jpg
就是popOver选了男或女后，性别后的文字希望也随着变化：
.w文件：
          <li xid="selectGender" class="list-group-item"  bind-click="{operation:'popOver.show'}"><div component="$UI/system/components/justep/row/row" class="x-row" xid="row2">
   <div class="x-col x-col-25" xid="col6"><span xid="span4"><![CDATA[性别]]></span></div>
   <div class="x-col" xid="col4"><span xid="span9" bind-text="$model.switchGender()"></span></div>
   <div class="x-col x-col-10" xid="col5"><i class="icon-chevron-right" xid="i2"></i></div>   
   </div><[img]file:///C:\Users\Roland\AppData\Local\Temp\)A[Y)I~](ZC9Z[3Y)IDK7LK.gif[/img]/li>



js文件：
define(function(require) {
        var $ = require("jquery");
        var justep = require("$UI/system/lib/justep");
        var Baas = justep.Baas;
        var Model = function() {
                this.callParent();
        };
var genderText = "";
Model.prototype.switchGender = function(){
        return genderText;
    };
Model.prototype.manLiClick = function(event){                 
        this.genderText = "男性";
                this.comp("popOver").hide();
        };
        Model.prototype.womanLiClick = function(event){
                this.genderText = "女性";
                this.comp("popOver").hide();
        };
技术大哥给看看，是怎么回事？我选了女后，文字还是空白的。

liangyongfei

zjroland 发表于 2017-2-16 17:40
变量改了，文字不随着变化，是怎么回事？
就是popOver选了男或女后，性别后的文字希望也随着变化：
.w文 ...

建议this.genderText 使用KO对象定义，
this.genderText = justep.Bind.observable('男')

赋值是this.genderText.set('女')

可视组件bind-ref 或 bind-text属性绑定这个ＫＯ对象就可以了！
参考：http://doc.wex5.com/data-bind-instro/

zjroland

多谢，搞定了。