Titanium ListView 如何根据 Alloy 任务的状态显示图像？

Question

我开始使用 Titanium 的第二周，我不知道如何根据任务的状态显示图像，例如，我想在 ListView 中显示一个绿色图标已选中，如果任务是未完成空白检查。

我试过使用此函数查询数据库

function mostrarLista(){

    var tasks = Alloy.createCollection('todo');
        // The table name is the same as the collection_name value from the 'config.adapter' object. This may be different from the model name.
        var table = tasks.config.adapter.collection_name;
        // use a simple query
        var query = tasks.fetch({query:'select status from ' + table + ' where status=" + 1 + "'});
        //books.fetch({query: {statement: 'DELETE from ' + table + ' where title = ?', params: [args.titulo] }});


    var section = $.elementsOnList;
        var item = section;
        var currentImage = item.icon.image;

    if(query==1){
    item.icon.image = "images/checked.png" ;
        }else{
    item.icon.image = "images/blank_check.png";
    }



}

但我不知道如何在不使用事件的情况下动态地将图像设置为 ListView。

这就是我在控制器中的内容

listdo.js

    var args = arguments[0] || {};

var myTasks=Alloy.Collections.todo;
    myTasks.fetch();



//FUNCION PARA CAMBIAR IMAGEN 
function checked(e){
        //$.alertDialog.show();

        //$.alertDialog.addEventListener('click', function(event) {
             // Get the clicked item

        var section = $.elementsOnList.sections[e.sectionIndex];
        var item = section.getItemAt(e.itemIndex);
        var currentImage = item.icon.image;


                //Antiguo
                     if(currentImage =="images/blank_check.png" && item.properties.estatus ==1){    
                        item.icon.image = "images/checked.png" ;

                        //Change the status in order to know which task has or not completed
                        updateID(item.properties.idTareas, 2);
                        alert('Tarea realizada');
                        //end update status

                     }else{
                        item.icon.image = "images/blank_check.png";
                        updateID(item.properties.idTareas, 1);
                        alert('Tarea activa');
                    }


        section.updateItemAt(e.itemIndex, item);

}

function showDetailTask(event){

    var itemSection = $.elementsOnList.sections[event.sectionIndex]; // Get the section of the clicked item
     // Get the clicked item from that section
    var item = itemSection.getItemAt(event.itemIndex);

    var args= {
        idTareas: item.properties.idTareas,
        nombre: item.properties.nombre, //Lo que captura el array 
        hora: item.properties.hora,
        fecCreacion: item.properties.fecCreacion, //Lo que captura el array 
        fechaTarea: item.properties.fechaTarea,
        descripcion: item.properties.descripcion, //Lo que captura el array 
        estatus: item.properties.estatus

    };
    var taskdetail = Alloy.createController("taskdetail", args).getView();
    taskdetail.open();

}

function updateID(idTareas, status){
    var task = myTasks.get(idTareas);
    task.set({
        "status":status  //Por defecto es 1 cuando esta activo si es cero quiere decir que está inactivo
    }).save();

}

在我的 ListView 中

<Alloy>
    <Collection src="todo" /> <!--Capture the collections I want to show -->
        <Tab id="tabPrincipal" title="Listado de tareas">       
    <Window>

                <AlertDialog id="alertDialog" title="Información" message="¿Desea marcar como completada está tarea?" cancel="1">
                        <ButtonNames>
                            <ButtonName>Si</ButtonName>
                            <ButtonName>No</ButtonName>
                        </ButtonNames>          
                              <!--
                            Only on Android, an additional view can be added to be rendered in
                            the AlertDialog, replacing any declared buttons. It will be added
                            to the AlertDialog's view hierarchy like any other View.
                        -->
                </AlertDialog>

                <ListView id="elementsOnList" defaultItemTemplate="elementTemplate" > <!--onItemClick= -->
                                        <Templates>
                                                <ItemTemplate name="elementTemplate">
                                                  <View>
                                                    <Label bindId="textoLista" id="textoLista" onClick="showDetailTask"/>
                                                    <ImageView bindId="icon" id="icon" onClick="checked"/> 
                                                  </View>
                                                </ItemTemplate>
                                            </Templates>
                                       <ListSection dataCollection="todo">

                                          <ListItem 
                                                icon:image="images/blank_check.png" 

                                                textoLista:text="{name}" 
                                                idTareas="{idTarea}" 
                                                nombre="{name}" 
                                                hora="{hour}" 
                                                fecCreacion="{dateCreated}"
                                                fechaTarea="{dueDate}" 
                                                descripcion="{description}" 
                                                estatus="{status}" 
                                            />  

                                       </ListSection>             
                </ListView>
    </Window>
        </Tab>
</Alloy>

提前致谢。

Answer 1

您可以使用 dataTransform 函数将 imageView 绑定到选中的或空白的图像。

这是你应该做的：

在 .xml 文件中：

<Alloy>
  <Collection src="todo" />
            ...
            ...
    <ListView id="elementsOnList" defaultItemTemplate="elementTemplate" >
       <ListSection dataCollection="todo" dataTransform="myDataTransformFunction">
        <ListItem
           icon:image="{image}" 
           textoLista:text="{name}" 
           idTareas="{idTarea}" 
           nombre="{name}" 
           hora="{hour}" 
           fecCreacion="{dateCreated}"
           fechaTarea="{dueDate}" 
           descripcion="{description}" 
           estatus="{status}"/>  
       </ListSection>

然后在您的控制器 .js 中定义 dataTransform 函数，如下所示：

function myDataTransformFunction(model){
  var transform = model.toJSON();
  //here I add a custom field to the model.
  transform.image = (transform.status == 1) ? "images/checked.png" : "images/blank_check.png";
  return transform;
}

有关数据绑定的更多详细信息，您可以参考Appcelerator & Alloy data binding docs

Titanium ListView 如何根据 Alloy 任务的状态显示图像？

Titanium ListView how do show image depending status of a task with Alloy?

listview

titanium