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的任务状态显示图像？

1 个答案: