JqueryMobile 页面的结构？答案

【问题标题】：Structure of JqueryMobile pages?JqueryMobile 页面的结构？
【发布时间】：2012-08-17 20:25:55
【问题描述】：

我正在使用 Asp.net MVC 在需要时提取我的页面。我的页面结构是：

{
   Layout = "";
}

  <div data-role="page"> 
     ....


      <script type="text/javascript">
        $(document).one("pageinit", function () {

          ....
      </script>

  </div>

我应该保留我的页面结构还是应该将我的脚本放在一个全局外部 javascript 文件中（在这种情况下，我应该如何将每个“pageinit”与正确的页面相关联）？

我遇到的另一个问题是在 chrome 中调试嵌入式脚本。这与它嵌入的事实有关吗？

【问题讨论】：

标签： javascript jquery asp.net-mvc jquery-mobile

【解决方案1】：

如果您迁移到单个 JS 包含，我建议这样做，那么您将更容易维护代码，因为它会在一个地方。

您可以根据正在初始化的伪页面的 ID 运行 pageinit 代码：

//setup initialization code for each pseudo-page that needs it
var myCode = {
    someID : function (event) {
        //run initialization code for the pseudo-page with the ID of "someID"
    },
    someOtherID : function (event) {
        //run initialization code for the pseudo-page with the ID of "someOtherID"
    }
};

//setup a delegated event handler for each pseudo-page's "pageinit" event
$(document).on('pageinit', '.ui-page', function (event) {

    //check if a function for this pseudo-page exists
    if (this.id in myCode) {

        //since the function exists, call it and pass "this" as the current pseudo-page as well as passing-in the "event" object
        myCode[this.id].call(this, event);
    }
});

【讨论】：

【解决方案2】：

这就是我所做的；

首先，我在一个外部 JS 文件中拥有我需要的所有脚本。

在我的 MVC 布局页面中，我为数据角色包装器创建了 div，以从属性中设置其 id 属性，每个控制器操作都将返回一个唯一值。

布局页面。

<body class="ui-mobile-viewport">
    <div data-role="page" id="@ViewBag.PageId">

然后在我的控制器动作中，我向视图返回一个唯一值；

public ActionResult Index()
        {
             ViewBag.PageId = "pageCustomers";

            return View();
        }

这意味着我可以按如下方式绑定到 page.init 事件。下面的脚本包含在控制器返回的 MVC 视图中的 <script> 标记中，并允许在视图加载时触发该特定视图的自定义 JS 代码。

 $('#pageCustomers').live('pageinit', function (event) {
    // do something
}

【讨论】：