windows store apps - Templates dinâmicos

Para usar templates dinâmicos em Apps da Windows Store
Um exemplo:

No html defina o ListView

<section aria-label="Main content" role="main">

<div data-win-control="WinJS.UI.ListView" id="TwGridView" data-win-options="{ layout:{type:WinJS.UI.GridLayout}}"></div>

</section>


no Js defina uma função para o template e gere o html pela função:


function CarregaLista (
      var furl = "http://search.twitter.com/search.json?q=#windows8&lang=pt";       WinJS.xhr({ url: furl }).done(            
          function (response) {                
             var resultado = JSON.parse(response.responseText);                
             window.localStorage.setItem("abc", "Opa");                
             var lista = new WinJS.Binding.List(resultado.results);
             TwGridView.winControl.itemDataSource = lista.dataSource;
             TwGridView.winControl.itemTemplate = CreateTemplate;               
           },            
           function (err) { },            
           function (progress) { }
       )
     }    


function CreateTemplate(itemPromise) {        
     return itemPromise.then(                    
             function (item) {                           
                   var container = document.createElement("div");                           
                   var abc = window.localStorage.getItem("abc");                    container.className = abc;                           
                   container.innerText = item.data.title;                           
                   if (abc == "Opa") {                               
                       window.localStorage.setItem("abc", "Opa2"); }
                   else
                      {window.localStorage.setItem("abc",Opa");
                  };                           
                   return container; } ) };



Verifique aqui também

http://stackoverflow.com/questions/10581644/dynamic-template-in-listview-winjs-in-windows-8

http://msdn.microsoft.com/en-us/library/windows/apps/hh700705.aspx


Nenhum comentário:

Postar um comentário