Appcelerator/TitaniumHTMLChunks/Templates代

Question

是否有像 handlebars/dust 这样的库（我可以使用它吗？如何使用？）或更智能的方法来在 Appcelerator / Titanium 上生成 HTML？

基本上我需要用对象数组中的数据填充一个 HTML 模板（特别是 table）。我宁愿避免字符串连接，因为它很丑陋且容易失败。我进行了广泛的搜索，但找不到答案。

我探索的一个选项是将我的 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>

任何 suggestions/samples 将不胜感激，谢谢！

Answer 1

（几乎）任何你可以在浏览器中做的事情，你都可以在 WebView 中做，包括使用像 Handlebars 这样的库。从加载到 WebView 的 HTML 中，您可以引用应用中嵌入的其他 JavaScript 文件。

有关所有详细信息，请参阅 WebView Guide。

Answer 2

由于我的项目中有 underscore.js，所以我最终使用了其中的模板。它适合我的需要，因为处理是在环境的 titanium/appcelerator 部分完成的，我不需要在它和 WebView 之间实现通信（如 Fokke 所建议的）。 HTML 已生成，然后显示以供查看 or/and 共享。我看过的其他选项：

小胡子没有逻辑，所以需要一些额外的调整生成 HTML。
Handlebars 在 titanium/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: "john.doe@email.com"}, {name: "Jane Doe", email: "jane.doe@email.com", address: "Galaxy 2"}]

Appcelerator/TitaniumHTMLChunks/Templates代

Appcelerator/Titanium HTML Chunks/Templates generation

javascript

templates

appcelerator

appcelerator-titanium