Appcelerator / Titanium HTML塊/模板生成

Question

是否有類似把手/塵土的庫（我可以使用它以及如何使用它？）或更聰明的方法來在Appcelerator / Titanium上生成HTML？

基本上，我需要用對象數組中的數據填充HTML模板（特別是表）。 我比較喜歡避免字符串連接，因為它很丑陋且容易失敗。 我已經進行了廣泛的搜索，但是找不到答案。

我探索的一個選擇是將HTML文件加載到WebView中，在其中創建腳本，然后使用WebView的evalJS（）並將我的數據從Titanium傳遞給它。 但是，這需要在HTML文件中編碼另一個操作DOM的函數（這將需要大量工作），此外，在此之后，我需要對其進行解析並將其廢棄，因為我不希望這部分成為對接收者可見（如果他們打開源）。 例如：

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

有一些方法可以利用chunks / 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>

任何建議/樣品將不勝感激，謝謝！

Answer 1

（幾乎）您可以在瀏覽器中進行的任何操作，都可以在WebView中進行，包括使用諸如Handlebars之類的庫。 從加載到WebView中的HTML，您可以引用應用程序中嵌入的其他JavaScript文件。

有關所有詳細信息，請參見《 WebView指南》 。

Answer 2

由於我的項目中包含underscore.js，因此我最終在其中使用了模板。 它適合我的需要，因為處理是在環境的鈦/加速器部分完成的，並且我不需要在它和WebView之間實現通信（如Fokke所建議）。 生成HTML，然后將其呈現出來以供查看或共享。 我看過的其他選項：

• 胡須少了邏輯，因此需要做一些額外的調整才能生成HTML。
• 把手不在鈦/加速器環境中運行（導致應用程序在嘗試加載時退出。我沒有嘗試在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: "john.doe@email.com"}, {name: "Jane Doe", email: "jane.doe@email.com", address: "Galaxy 2"}]