javascript - 除了通过 JavaScript 附加之外，还有其他方法可以将动态数据添加到 jQuery Mobile 页面中吗？

Question

我最近开始使用 jQuery Mobile。我将它与 Cordova 一起使用。首先，我正在使用 SQLite 数据库构建一个简单的混合应用程序。我已经阅读了 JQM 的文档。从我在大多数示例中看到的情况来看，页面中的数据完全通过 JavaScript 提供，如下所示:

我有一个这样的页面:

   <div data-role="page" id="home-rh">
        <div data-role="header" data-theme="a" class="" data-id="header" data-position="fixed">
            <h1>My Holiday Calendar</h1>
        </div>
        <div data-role="content" id="myContent">Hello 2</div>
        <div data-role="footer" data-position="fixed" data-id="footer">
            <div data-role="navbar">
                <ul>
                    <li><a href="#home-all">All Holidays</a></li>
                    <li><a href="#" class="ui-btn-active">RH</a></li>
                    <li><a href="#">CH</a></li>
                </ul>
            </div>

        </div>
    </div>

我知道数据可以通过 JavaScript 动态添加，如下所示:

$("#myContent").append('****MY HTML goes here*****');

我的问题:

1. 有没有更好的方法可以在 JQM 中动态添加内容到我的页面，而不必像上面那样用 JavaScript 代码编写 HTML 并附加它？

也欢迎任何其他好的做法。

我浏览了很多论坛..但无法理清我的头脑。

编辑:

最初问了 3 个问题，但为了更具体而删除了另外两个问题。 @Gajotres 给出了所有三个问题的意见。 这是其他 2 个..

我们在 JQM 中通过 JavaScript 添加 HTML 好吗？如果我的 HTML 很大，不会有问题吗？

我非常确定很多优秀的应用程序都是基于 JQuery Mobile 构建的。我想知道他们在这种情况下通常使用的一些模式。

谢谢

Answer 1

这些都是好问题，但您在这里使用了错误的框架。不要误会我的意思，就像 Omar 一样，我正在帮助其他人解决 jQuery Mobile 问题，但您的问题超出了 jQuery Mobile 的范围。

1. 有更好的方法，但 jQuery Mobile 无法正常使用它。你需要使用一些MVC框架，目前最好的一个是AngularJS(这是我的主观感觉；你也可以使用BackboneJS、KnockoutJS或EmberJS)。 AngularJS 指令将使这一步几乎毫不痛苦，它会自动完成所有事情，你根本不需要做任何事情。

   只要你有一些数据源(模型)，AngularJS就会自动附加页面数据。这是一个很好的方法，但是您将需要打开 jQuery Mobile 页面路由(它与 AngularJS 路由不兼容)。这样您将失去 jQuery Mobile 转换。

   更好的是 AngularJS 使用它自己的模板引擎(模仿 MustacheJS 或 HandlebarJS)。

2. 这是这里最不重要的问题。 jQuery Mobile 已经有了很大的 DOM 印记，无论您以哪种方式填充附加内容都无关紧要。附加附加内容只需要几分之一秒(通常 50 毫秒，我在 2 年前做了一些基准测试)，但页面增强过程将需要更多时间。所以这是这里最大的问题。

   基本上，如何附加数据并不重要，更大的问题是附加多少数据。

3. 阅读this 如果您想了解优秀 jQuery Mobile 页面架构的 secret ，请阅读本文。

我的建议是，跳过 jQuery Mobile 并使用 Kendo UI、Ionic Framework 或 Onsen UI。 Kendo UI 与 jQuery Mobile 非常相似，但它有自己的 MVC 框架。它甚至使用 jQuery。或者你可以将它与 AngularJS 一起使用(他们最近也制作了这个版本)。

Ionic 和 Onsen UI 是完全由 AngularJS 驱动的移动框架。它们非常快，但您需要花一些时间学习 AngularJS。