Appcelerator/Titanium HTML塊/模板生成

是否有像handlebars/dust（我可以使用它和如何？）或更智能的方式來生成在Appcelerator/Titanium上的HTML？Appcelerator/Titanium HTML塊/模板生成

基本上我需要用對象數組中的數據填充HTML模板（特別是表格）。我寧願轉義字符串連接，因爲它很醜並且容易失敗。我已經廣泛搜索，但無法找到答案。

我探索的一個選項是將我的HTML文件加載到WebView中，在其中創建一個腳本，然後使用WebView的evalJS（）並將我的數據從Titanium傳遞給它。然而，這需要將另一個函數編碼到操縱DOM的HTML文件中（這將是很多工作），並且此後我需要解析它並將其取消，因爲我不希望這部分是接收器可見（以防他們打開信號源）。例如：

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"');");

，然後在HTML

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

是否有某種方式利用塊/ HTML模板（示例）：

<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>

任何建議/樣品很樂意可以理解，謝謝！

來源

2016-05-25 user1927033

由於我的項目中有underscore.js，我最終使用了它的模板。它適合我的需求，因爲處理是在環境的鈦/ appcelerator部分完成的，我不需要在它和WebView之間實現通信（如Fokke所建議的那樣）。 HTML會在生成之後呈現給用戶查看或共享。我已經看了其他選項：

鬍子是邏輯較少，所以它會一直需要一些額外的調整生成HTML。
把手沒有在鈦/ Appcelerator的環境中運行（導致應用程序退出時試圖加載它。我沒有試圖利用它在WebView中

常規的HTML模板部分文件是：

<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>

JavaScript的部分：

_ = 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....

的listOfUsers是對象的一個簡單的數組：

[{name: "John Doe", email: "[email protected]"}, {name: "Jane Doe", email: "[email protected]", address: "Galaxy 2"}]

來源

2016-06-05 12:07:26 user1927033

（幾乎）您可以在瀏覽器中執行任何操作，您可以在WebView中執行操作，包括使用Handlebars等庫。從加載到WebView的HTML中，您可以引用嵌入到應用程序中的其他JavaScript文件。所有細節請參閱WebView Guide。

來源

2016-05-30 18:21:24

Appcelerator/Titanium HTML塊/模板生成

回答

相關問題