如何在 jQuery Mobile 中保持干燥？答案

【问题标题】：How to be DRY in jQuery Mobile?如何在 jQuery Mobile 中保持干燥？
【发布时间】：2013-08-14 14:32:45
【问题描述】：

我正在使用 PhoneGap 和 jQuery Mobile 开发移动应用程序。我想保持我的视图文件干燥。如何在 jQuery Mobile 中实现这一点？我应该将每个页面元素都放在一个 HTML 文件中吗？

【问题讨论】：

【解决方案1】：

没错，jQuery mobile 就是为此而设计的，而 I 是最好的方法。

你可以有这样的东西：

<html>
<head>
   <script src="jquerymobilelibrary.js"/>
</head>
<body>
  <div data-role="page" id="page1">
    <div data-theme="a" data-role="header"><h3>Header</h3></div>
    <div data-role="content">
        <div data-role="fieldcontain">
            <label for="textinput2">Title</label>
            <input name="" id="textinput2" placeholder="" value="" type="text">
        </div>
        <a data-role="button" href="#page2">Button</a>
    </div>
  </div>

  <div data-role="page" id="page2">
    <div data-theme="a" data-role="header"><h3>Header</h3></div>
    <div data-role="content">
        <!-- Content is empty -->
    </div>
  </div>
</body>
</html>

要在 JS 中以编程方式在页面之间切换，您可以使用

<script>
  $.mobile.changePage('#page2')
</script>

在 jquery mobile site 中有一个简单但很酷的拖放式 UI 构建器来探索 JQM 库可以做什么。

希望对你有帮助！

【讨论】：

那么所有内容都在一个 HTML 文件中？我可以忍受，我想。如果某些页面具有相同的页眉或页脚怎么办？我如何保持干燥？
是的，你可以。 :) 这很容易维护。如果它们具有相同的页眉/页脚，则可以使用具有相同 ID 的 data-id 属性。检查一下：goo.gl/MmktFF 并在此处尝试：goo.gl/wobqh6（如果对您有帮助，请标记为正确答案：]）
我认为这是为了使页眉/页脚持久化，对吗？我正在尝试在各个页面中重用相同的标题。我的问题是关于干燥。
您可以通过注入页面和/或动态更改来实现此目的。您仍然可以附加事件侦听器并操作 DOM。