Question

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

{
   Layout = "";
}

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


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

          ....
      </script>

  </div>

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

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

Answer 1

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

您可以根据正在初始化的伪页面的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);
    }
});

Answer 2

这就是我所做的;

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

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

布局页面。

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

然后在我的Controller Action中，我向视图返回一个唯一值;

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

            return View();
        }

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

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

JqueryMobile页面的结构？

2 个答案: