Appcelerator/Titanium HTML Brocken/Templates Generation

Question

Gibt es eine Bibliothek wie Lenker/Staub (kann ich es verwenden und wie?) Oder smarter Weg HTML auf Appcelerator/Titanium zu erzeugen?

Grundsätzlich muss ich eine HTML-Vorlage (speziell eine Tabelle) mit Daten aus einem Array von Objekten füllen. Ich würde es vorziehen, die String-Verkettung zu umgehen, da sie hässlich und fehleranfällig ist. Ich habe ausführlich gesucht, konnte aber keine Antwort finden.

Eine Option, die ich untersucht habe, ist, meine HTML-Datei in ein WebView zu laden, ein Skript darin zu erstellen und dann evalJS() des WebView zu verwenden und meine Daten von Titanium dorthin zu übertragen. Dies würde jedoch erfordern, eine andere Funktion in die HTML-Datei zu schreiben, die das DOM manipuliert (was eine Menge Arbeit wäre) und zusätzlich danach müsste ich es analysieren und verwerfen, da ich diesen Teil nicht haben möchte sichtbar für den Empfänger (falls sie die Quelle öffnen). ex:

var data = [{a:a}, {a:b}, {a:c}]; 
var webview = Titanium.UI.createWebView({url:'my_template.html'}); 
var str = "Hello world!"; 
webview.evalJS("generateTable('"data"');"); 

und dann in HTML

function generateTable(data) { 
//manipulate the DOM to create the table and add the properties... 
} 

Gibt es irgendeine Art und Weise chunks/html Templat (Beispiel) zu verwenden:

<div class="main"> 
<table sortable="sortable"> 
    {% loop in $users as $user %} 
     <tr> 
      <td class='center'>{$data.id}</td> 
      <td class='center'>{$data.date}</td> 
      <td class='center'>{$data.name}</td> 
      <td class='center'>{$data.email}</td> 
     </tr> 
    {% endloop %} 
</table> 

Irgendwelche Vorschläge/samples gerne würde geschätzt, Vielen Dank!

Answer 1

Da ich in meinem Projekt underscore.js habe, habe ich das Templat darin benutzt. Es entspricht meinen Bedürfnissen, da die Verarbeitung im Titan/Appcelerator-Teil der Umgebung erfolgt und ich keine Kommunikation zwischen ihm und einem WebView implementieren muss (wie von Fokke vorgeschlagen). Der HTML-Code wird generiert und danach zur Ansicht und/oder zum Teilen bereitgestellt. Andere Optionen, die ich angeschaut habe:

• Schnurrbart logisch weniger, so würde es einige zusätzliche Optimierungen erforderlich haben die HTML zu erzeugen.
• Lenker nicht in der Titan/Appcelerator Umgebung lief (verursacht die Anwendung, wenn zu beenden versucht, es zu laden. Ich es nicht in einem
WebView zu nutzen, hat versucht,

Die Vorlage Teil des regulären HTML Datei ist:

<div class="main"> 
    <table sortable="sortable"> 
     <tr class="hidden"> 
      <th>User</th> 
      <th>Address</th> 
      <th>Email</th> 
      <th>Phone</th> 
     </tr> 
     <% _.each(users, function(user, key, list) { %> 
     <tr> 
      <td><%= user.name %></td> 
      <td><%= user.address %></td> 
      <td><%= user.email %></td> 
      <td><%= user.phone %></td> 
     </tr> 
     <% });%> 
    </table> 
</div> 

der JavaScript-Teil:

_ = require('lib/underscore')._; 

var listOfUsers = mdb.fetchAllUsersForExport(); 

var templateFile = Ti.Filesystem.getFile(Ti.Filesystem.resourcesDirectory, '/templates/template.html'); 
var mTemplate = templateFile.read(); 

var render = _.template(mTemplate); 
var html = render({ 
    users : listOfUsers) 
}); 

//use the html in WebView or output it to file for sharing.... 

Die listOfUsers ist eine einfache Anordnung von Objekten:

[{name: "John Doe", email: "john.doe@email.com"}, {name: "Jane Doe", email: "jane.doe@email.com", address: "Galaxy 2"}] 

Answer 2

(Fast) Alles, was Sie im Browser tun können, können Sie in einem WebView tun, einschließlich der Verwendung von Bibliotheken wie Lenker. Über den HTML-Code, den Sie in das WebView laden, können Sie auf andere JavaScript-Dateien verweisen, die in Ihrer App eingebettet sind.

Siehe die WebView Guide für alle Details.