求助！！ 动态生成list 组件，data组件绑定不上去

沐夕花开

如图，我是在一个for循环里面动态创建多个list 组件，list组件可以正常生成，template也是可以添加进去的，然鹅，就是无法绑定data，在网上苦苦寻找无果，希望在这里可以有收获，感谢。
以下是动态生成的 html 结构（在chrome里面看的）。

还有以下是正常生成的 html 结构。

也试过用jq 给list 添加data属性，虽然加上了，但也是没有用。

沐夕花开

第二个附件 是正常生成的 html结构。
第三个附件是动态生成的结构。

沐夕花开

里面的data组件 article 是静态的。

liangyongfei

new list 参考
http://docs.wex5.com/comps-list/

只能是new 的时候动态设置，  如果list实例已经生成了，就不支持动态修改data属性了！！  这个不能动态设置

沐夕花开

liangyongfei 发表于 2017-12-29 09:51
new list 参考
http://docs.wex5.com/comps-list/

明白，但是我在生成list 实例时候设置 了data也没反应。网上能找的相关帖子都几乎看过了，写法都是一样。

留意第一张图片，这是我生成list实例时候的写法，我在生成list 实例的时候
在配置里加了   "data" : "article",但是生成之后发现 list 实例并没有绑定到相应的data 组件上

liangyongfei

沐夕花开 发表于 2017-12-29 10:28
明白，但是我在生成list 实例时候设置 了data也没反应。网上能找的相关帖子都几乎看过了，写法都是一样。 ...

你参考案例的写法

1. data-bind="{text:ref(\'fTitle\')}"

复制代码

这样才能绑定字段的

沐夕花开

liangyongfei 发表于 2017-12-29 10:35
你参考案例的写法

这样才能绑定字段的

这是构造函数
that.newList = new List({
                                                        "xid" : "list"+i,
                                                        "data": "article",
                                                        "autoLoad":"true",
                                                        "template" : listTemplate(),
                                                        "parentNode"(that.getElementByXid("typeContent"+i)).find('.x-scroll-content'),
                                                });
这个我的 template 内容
'<ul class="x-list-template article-list" xid="listTemplateUl1"> '
                 +' <li xid="li1" dir="ltr"> '
                   +' <div class="padding-lr-30 padding-tb-30"> '
                     +' <a component="$UI/system/components/justep/button/button" class="btn clearfix" label="button" xid="button9" > '
                        +'<div class="fl clearfix"> '
                         +' <h1  data-bind="{text:ref(\'postTitle\')}"/>'
                          +'<div class="article-box clearfix"> '
                           +' <p class="article-text fl">发布于：</p>  '
                            +'<p class="article-text fl" data-bind="{text:ref(\'postDate\')}" /> </div>  '
                            +'<div class="clearfix flex-box"> '
                            +' <i class="icon-reader "/>  '
                            +' <span class="article-text " data-bind="{text:ref(\'reader\')}"/>  '
                            +'<i class=" icon-comment "/>  '
                           +' <span class="article-text" data-bind="{text:ref(\'comment\')}" /> '
                          +'</div> '
                        +'</div>  '
                        +'<div class="fr article-img"> '
                         +' <img src=" " alt="" xid="image1" data-bind="{src:ref(\'postImg\')}" /> '
                       +' </div>  '
                       +' <span xid="span24"  data-bind="{text:ref(\'id\')}"  style="display:none;" class="idClassP"/>'
                     +' </a> '
                    +'</div> '
                  +'</li> '
                +'</ul> '

生成的list实例 ul 下面是没有子元素的。

沐夕花开

另外，试了下不用list组件，直接用jq 将 ul 插入到 dom 中，然后遍历数据生成对应数量的 li，如果 li 的条数过多，超过窗口的高度  scrollview 上拉加载就不能用了。

liangyongfei

沐夕花开 发表于 2017-12-29 11:21
这是构造函数
that.newList = new List({
                                                        "xid" : "list"+i,

本地测试没问题点击按钮就能生成list
动态生成的list里面只能放HTML 源码，不能直接放x5组件的  ，不如button 组件是不能动态生成的！

沐夕花开

liangyongfei 发表于 2017-12-29 11:35
本地测试没问题点击按钮就能生成list
动态生成的list里面只能放HTML 源码，不能直接放x5组件的  ，不如b ...

可以正常生成list了，
前面无法正常生成是因为  parentNode 不接受这种写法，以下：

$(that.getElementByXid("Xid"))

改成这样就可以：
that.getElementByXid("typeContent"+i)     顺利插进去，并且数据也正常显示。

所以要插入到x-scroll-content 中就得这样写：
that.getElementByXid("typeContent"+i).getElementsByClassName("x-scroll-content")[0]

实际测试 在 template 直接书写 button 组件也不影响 list 实例生成

最后还有一个问题  ：
生成 list 实例时候绑定图片的语法是怎么样的