动态创建 list 数据处理问题

yczxqy

动态创建 list 时遇到问题，在论坛上找到了一些办法，也试验成功，如：
方法一：不能使用复杂组件
http://doc.wex5.com/?p=7598#005中采用：

1. var cfg = {
   
2. xid: 'list1',
   
3. autoLoad: true,
   
4. data: 'newsData',
   
5. template: '<div class="x-list-template"><div data-bind="{text:ref(\'fTitle\')}"></div></div>',
   
6. parentNode: this.getElementByXid('view')
   
7. };
   
8. new List(cfg);

复制代码

经过测试是成功的，但这里只是用 div 来展现数据，如果想通过 labelInput 这样的组件来展现，通过修改template始终未能成功，代码如下：

1.                 var cfg4 = {
   
2.                  xid: 'list2',
   
3.                  autoLoad: true,
   
4.                  data: 'data1',
   
5.                  template: "<ul class='x-list-template' xid='listTemplateUl2'><li xid='li2'>"
   
6.                          +"<div component='$UI/system/components/justep/labelEdit/labelEdit' class='x-label-edit x-label30' xid='labelEditll1'>"
   
7.                          +"<label class='x-label' xid='labelll1' data-bind='{text:val("label")></label>"
   
8.                          +"<input component='$UI/system/components/justep/input/input' class='form-control x-edit' xid='inputll1' data-bind='{text:val("label")>"
   
9.                          +"</input></div></li></ul>",
   
10.                  parentNode: this.getElementByXid('div2')
    
11.                 };
    
12.                 new list(cfg4);

复制代码

方法二：
根据list的dom结构，一层一层地创建，组件是创建成功了，但数据绑定有问题，代码如下：

1.                 var parentNode = this.getElementByXid("div2");
   
2.                 var option = {
   
3.                   "parentNode" : parentNode,
   
4.                         "xid"  : "list2",
   
5.                         "data" : "data1"
   
6.                         }
   
7.                 new list(option) ;
   
8.                 parentNode = this.getElementByXid("list2");
   
9.                 var ul = $("<ul class='x-list-template' xid='listTemplateUl2'></ul>");
   
10.                 justep.Bind.addNodes(parentNode, ul);
    
11.                 parentNode = this.getElementByXid("listTemplateUl2");
    
12.                 var li = $("<li xid='li2'></li>");
    
13.                 justep.Bind.addNodes(parentNode, li);
    
14.                 //生成展现组件
    
15.                 parentNode = this.getElementByXid("li2");
    
16. var label = $("<label class='x-label' xid='label1' data-bind="{text:val('label')}"></label>"); //失败       
    
17. justep.Bind.addNodes(parentNode, label);

复制代码

在这里出现错误：


请问：如果在 list 下，用 labelinput 这样复杂的组件来展现数据呢？

liangyongfei

为什么要动态创建list组件呢？？
静态list 放置某个位置不能实现需求吗？
通过 bind-visible 控制list   的 显示隐藏能做到吗？

如果可以的话！ list中的空间，可通过bind-visible控制显示隐藏就可以！
不需要动态创建的吧！

yczxqy

我要做一个使用面比较广泛的信息化系统的app接口，实现这个系统功能模块的动态生成。如：


                    


在这种应用场景中：不同的模块表结构是不一样的，字段数量、名称、类型都是不一样的。不同数据的展现也不一样，如：有些用 span 展现，有些用 labelEdit来编辑，有些用附件工具上传，有时需要用img来显示图片。
我们主体功能已经其实实现，只是细节还在调。
在这种情况下，与 list 绑定的组件是活的，如果在开发的时候预定义好，由于不知道组件的数量、展现形式，所以用bind-if的方式让调节组件的显示，程序会非常庞大。
目前 list 下动态生成简单的对象，如 html 对象，已经实现。如右图的图片就生成在 list 上。但复杂的 labelEdit 就不行了。

liangyongfei

yczxqy 发表于 2017-10-16 16:19
我要做一个使用面比较广泛的信息化系统的app接口，实现这个系统功能模块的动态生成。如：

有component 属性的标签都是属于组件！
都需要通过动态new

你试试，先new list(cfg4);
然后再使用data.each循环 new       labelEdit 和 input
分别给每一行动态添加组件！

组件必须实现了buildTemplate 方法才支持动态new
否则就无法动态new 的！  attachmentSimple 就无法动态创建。。。。。


另外关于  动态创建组件和dom点击，还是参考那个案例
http://docs.wex5.com/wex5-ui-question-list-2201/

只不顾list中需要 循环 判断  动态 new 和多个这样的组件！ 依次添加到list每一行上！

list上可以使用  bind-attr-index="$index()"  生成一个索引的标识，   添加在list上的时候！通过对比行对象的索引和  index 属性的值，找到 添加行的位置！

yczxqy

我上面的范例二，就是通过 new 的方法，但绑定数据集出了问题：
var label = $("<label class='x-label' xid='label1' data-bind=\"{text:val('label')}\"></label>");出现错误：



所以关键是数据绑定的写法上，请指导一下。谢谢！

liangyongfei

yczxqy 发表于 2017-10-16 18:02
我上面的范例二，就是通过 new 的方法，但绑定数据集出了问题：
var label = $("");出现错误：

抱歉，刚刚我说的有问题呢！
我问了一下！你的这样的需求，new list是有问题的！动态  list中只能放置html标签，但是动态的 list中就不能放置 组件，这样是没法动态生成的！

如果想动态创建组件！直接data.each循环 生成多个组件，依次添加在某个div下即可！就不需要使用list组件了！


你的问题
请问你 new List之前  data1  组件是否已经存在了？？只有data组件绑定成功了！才可以使用val('label')  获取字段的值的！

yczxqy

好的，谢谢！我再来测试一下。