如何动态创建图像上传组件attachmentSimple2 ？

yczxqy

需要动态生成图像上传组件，仿照示例生成未能成功，请问该如何操作？

1.                 var cfg4 = {
   
2.                 parentNode: this.getElementByXid('div1'),
   
3.                 xid                        :        "attachmentSimple1",
   
4.                 "actionUrl"        :        "/baas/es/esService/SimpleFileStore",
   
5.                 "bind-ref"        :        "$model.data1.ref("img")" ,
   
6.                 "accept"                :        "image/*" ,
   
7.                 "template"        : "    <div class='x-attachment' xid='div'> "
   
8.                       + "<div class='x-attachment-content x-card-border' xid='div4'> "
   
9.                       + "  <div class='x-doc-process' xid='div5'> "
   
10.                       + "       <div class='progress-bar x-doc-process-bar' role='progressbar' style='width:0%;' xid='progressBar1'/></div>  "
    
11.                       + "        <div data-bind='foreach:$attachmentItems' xid='div6'> "
    
12.                       + "          <div class='x-attachment-cell' xid='div7'> "
    
13.                       + "            <div class='x-attachment-item x-item-other' "
    
14.                       + "               data-bind='click:$model.previewOrRemoveItem.bind($model),style:{backgroundImage:($model.previewPicture.bind($model,$object))()}' xid='div8'>"
    
15.                       + "              <a data-bind="visible:$model.$state.get() == 'remove'" class='x-remove-barget' xid='a1'/>"
    
16.                       + "            </div> "
    
17.                       + "          </div> "
    
18.                       + "        </div>  "
    
19.                       + "        <div class='x-attachment-cell' data-bind="visible:$state.get() == 'upload'" xid="div9"> "
    
20.                       + "          <div class="x-attachment-item x-item-upload" data-bind="visible:$state.get() == 'upload'" xid="div10"/> "
    
21.                       + "        </div>  "
    
22.                       + "        <div class="x-attachment-cell" data-bind="visible:$state.get() == 'upload' && $attachmentItems.get().length > 0" xid="div11"> "
    
23.                       + "          <div class="x-attachment-item x-item-remove" data-bind="click:changeState.bind($object,'remove')" xid="div12"/> "
    
24.                       + "        </div>"  
    
25.                       + "        <div style="clear:both;" xid="div13"/></div>"
    
26.                       + "    </div> "
    
27.                       + "  </div>"
    
28.                 };
    
29.                
    
30.                 new attachmentSimple(cfg4);       

复制代码

上面的代码，是根据窗口手动生成得到的源码上调整而来，但生成不能成功，还请指导一下。谢谢！

liangyongfei

组件只有实现了 buildTemple 方法才能动态创建！
看下组件源码！没有实现这个
/UI2/system/components/justep/attachment/attachmentSimple.js

yczxqy

也就是说，attachmentSimple 是不能动态创建的，对吗？

yczxqy

是没有 buildTemplate ,我再想其它的办法。谢谢！

liangyongfei

yczxqy 发表于 2017-10-16 17:37
是没有 buildTemplate ,我再想其它的办法。谢谢！

http://bbs.wex5.com/forum.php?mo ... 7&pid=165500666

动态new 的 list  里面只能放置标准的HTML ，x5的组件放进去不会生效的！

zhangql8

yczxqy 发表于 2017-10-16 17:37
是没有 buildTemplate ,我再想其它的办法。谢谢！

你好，动态创建的问题你有解决了吗？

liangyongfei

zhangql8 发表于 2017-10-25 21:48
你好，动态创建的问题你有解决了吗？

动态  list中只能放置html标签，但是动态的 list中就不能放置 组件，这样是没法动态生成的！

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

yczxqy

已经找到变通的办法，可以结贴

liangyongfei

yczxqy 发表于 2017-10-29 17:24
已经找到变通的办法，可以结贴

那欢迎分享一下？如何变天解决的？？　　让大家参考下思路。。

yczxqy

不好意思，最终attachmentSimple 并没有动态创建，还是用的 KO隐藏的办法