使用 jquery-mobile 分离关注点

Question

我的 jquery 移动版 1.4.5 index.html 页面中有一个 table：

<table id="summary-table" data-role="table" 
       data-mode="columntoggle" class="ui-responsive table-stroke">
     <thead>
        ...
     </thead>
     <tbody>
        ...
     </tbody>
</table>

我的 index.js 文件中也有一些 javascript：

    $(document).on("touchend", "#listButton", function(e) {
        e.preventDefault();
        db.allDocs({include_docs: true, attachments: true}, function(err, response) { 
           for (var record in response) {
              $("#summary-table tbody").append(
                  "<tr>"+
                  "<th>" + record.a + "</th>"+
                  "<td>" + record.b + "</td>"+
                  "</tr>");
           }
    });

这会起作用，但似乎不是分离关注点的好方法，因为我将 html 嵌入到我的 javascript 中。

使用 jquery 移动设备分离问题的最佳做法是什么？

Answer 1

最后我遵循了示例项目中使用的模式https://github.com/hazems/cordova-mega-app

该项目将 javascript 代码分为以下关注点：

api（服务）
型号
控制器

使用 jquery-mobile 分离关注点

separating concerns with jquery-mobile

jquery-mobile

cordova