移动开发list组件如何动态设置显示内容

magichjq

想实现的如下情况：
mobileUI中，list模版里面有image标签，想在list渲染行的时候，将数据集中的某字段值（该值是url）赋值给image以便不同值显示不同图片，请问如何处理。

jishuang

可以直接把这列的值取出来,直接把url赋值给image的src属性值

magichjq

jishuang 发表于 2013-7-19 16:36
可以直接把这列的值取出来,直接把url赋值给image的src属性值

试过了会报错，报错信息：Uncaught TypeError:Cannot set property 'src' of null
前提image1对象存在，代码如下，
mainActivity.list1RenderRow = function(event){
        var URL = event.data.getValue("fThumbURL");
        document.getElementById("image1").src = justep.Request.convertURL(URL,
                        true);
};

jishuang

如下：

1. var url =  justep.Request.convertURL("/UI/system/images/standardToolbar/standard/edit.gif");
   
2.         document.getElementById("image1").setAttribute("src", url);

复制代码

magichjq

jishuang 发表于 2013-7-19 17:44
如下：

还是报错 Uncaught TypeError:Cannot set property 'setAttribute' of null，不是写法问题，moblieUI的list里面找不到image1，所以提示对象是null。
试过 __list1__rowid__image1 对象，虽然能找到，但是赋值没有效果。

jishuang

.w发一下看看，image组件在什么位置布局的？

magichjq

jishuang 发表于 2013-7-22 11:31
.w发一下看看，image组件在什么位置布局的？

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

<xui:window xmlns:xui="http://www.justep.com/xui" xmlns="http://www.justep.com/xui" xmlns:xhtml="http://www.w3.org/1999/xhtml" component="/mobileUI/system/components/mobile/window.xbl.xml#window" id="window">  
  <xui:model component="/mobileUI/system/components/mobile/model.xbl.xml#model" id="model1" style="top:23px;left:366px;" onload="mainActivity.model1Load">
    <xui:data auto-load="false" component="/mobileUI/system/components/mobile/data.xbl.xml#bizData" concept="APP_COST_CLASS" id="main">
      <reader action="/MasterStep/RestaurantSystem/logic/action/queryAPP_COST_CLASSAction" id="default1"/>  
      <writer action="/MasterStep/RestaurantSystem/logic/action/saveAPP_COST_CLASSAction" id="default4"/>  
      <creator action="/MasterStep/RestaurantSystem/logic/action/createAPP_COST_CLASSAction" id="default5"/>
    </xui:data>
  </xui:model>  
  <xui:view auto-load="true" id="rootView">
    <xui:layout id="rootLayout" style="height:100%;width:100%">
      <xhtml:div component="/mobileUI/system/components/mobile/titlebar.xbl.xml#titlebar" id="htitlebar" title="餐饮分类">
        <item id="titlebarItem2" operation="refresh" operation-owner="main"/>  
        <item class="xui-backButton-m" id="titlebarItem1" operation="close" operation-owner="window"/>
      </xhtml:div>  
      <xui:place control="windowDialog1" id="controlPlace8" style="top:88px;left:367px;"/>  
      <xhtml:div component="/mobileUI/system/components/mobile/list.xbl.xml#list" id="list1" data="main">
   <xui:template id="template1">
  <xhtml:table border="0" id="table1" style="width:100%;">
   <xhtml:tr id="tr1">
    <xhtml:td id="td1" align="center" valign="middle"><xhtml:img src="about:blank" alt="" id="image1" style="width:32px;" height="32px"></xhtml:img></xhtml:td>
    <xhtml:td id="td2" style="width:100%;" valign="middle" align="left"><xui:place control="output1" id="controlPlace1"></xui:place></xhtml:td></xhtml:tr>
   </xhtml:table></xui:template></xhtml:div></xui:layout>  
    <xhtml:div component="/mobileUI/system/components/mobile/windowDialog.xbl.xml#windowDialog" id="windowDialog1" modal="true" show-title="false" status="maximize" title="订单明细"/>  
    <xhtml:span component="/mobileUI/system/components/mobile/output.xbl.xml#output" id="output1" class="xui-output-m" data="main" ref="fName"></xhtml:span>
  </xui:view>  
  <xui:resource id="resource1">
    <xhtml:script id="htmlScript2" src="mainActivity.js"/>
  </xui:resource>
</xui:window>

jishuang

可以直接在image上设置好src定义多个template,在list中onRenderRow中可以接管控制显示模板

magichjq

jishuang 发表于 2013-7-22 15:56
可以直接在image上设置好src定义多个template,在list中onRenderRow中可以接管控制显示模板 ...

好吧暂时先结贴吧