Question

在JQuery Mobile中，我创建了一个动态列表视图，该视图应根据单击的项目创建动态页面。我设法启动并运行listview，但动态页面问题让我头疼，因为这个错误：

TypeError：t.data（...）未定义

... ollapsiblebound“，！0）.bind（”expand collapse“，function（t）{var n = t.type ===”collapse ...

每当我尝试导航到动态页面时，我就会在Firebug上得到这个。我用来创建列表视图的代码是这个（它似乎工作正常）：

for (i=0; i<contacts_list.length;i++) {
            var patient = contacts_list[i];
            output += "<li id=" + patient.id + "><a href='#update?patient=" + patient.id + "'><h2>" + patient.name + "</h2><a href='#' data-rel='popup' data-position-to='window' data-transition='pop'></a></li>";
        }
    }

$("#patlist").append(output).listview("refresh");

我用来通过点击列表视图中的项目来创建页面的代码与此页面上的代码非常相似：http://jquerymobile.com/demos/1.1.1/docs/pages/page-dynamic.html

$(document).bind("pagebeforechange", function (e, data) {

 // We only want to handle changePage() calls where the caller is
 // asking us to load a page by URL.
 if (typeof data.toPage === "string") {

     // We are being asked to load a page by URL, but we only
     // want to handle URLs that request the data for a specific
     // category.
     var u = $.mobile.path.parseUrl(data.toPage),
         re = /^#update/;

     if (u.hash.search(re) !== -1) {

         // We're being asked to display the items for a specific category.
         // Call our internal method that builds the content for the category
         // on the fly based on our in-memory category data structure.
         showPatient(u, data.options);

         // Make sure to tell changePage() we've handled this call so it doesn't
         // have to do anything.
         e.preventDefault();
     }
   }
});

function showPatient(urlObj, options) {
 var patientId = urlObj.hash.replace(/.*patient=/, ""),

     // Get the object that represents the category we
     // are interested in. Note, that at this point we could
     // instead fire off an ajax request to fetch the data, but
     // for the purposes of this sample, it's already in memory.
     patient = JSON.parse(storage.getItem("patients:" + patientId)),

     // The pages we use to display our content are already in
     // the DOM. The id of the page we are going to write our
     // content into is specified in the hash before the '?'.
     pageSelector = urlObj.hash.replace(/\?.*$/, "");

 if (patient) {
     // Get the page we are going to dump our content into.
     var $page = $(pageSelector),

         // Get the header for the page.
         $header = $page.children(":jqmData(role=header)"),

         // Get the content area element for the page.
         $content = $page.children(":jqmData(role=content)"),

         // The markup we are going to inject into the content
         // area of the page.
         markup = "<p>" + patient.name + "</p><ul data-role='listview' data-inset='true'>",

         // The array of items for this category.
         cItems = patient.name,

         // The number of items in the category.
         numItems = 1;

     // Generate a list item for each item in the category
     // and add it to our markup.
     for (var i = 0; i < numItems; i++) {
         markup += "<li>" + cItems + "</li>";
     }
     markup += "</ul>";

     // Find the h1 element in our header and inject the name of
     // the category into it.
     $header.find("h1").html(patient.name);

     // Inject the category items markup into the content element.
     $content.html(markup);

     // Pages are lazily enhanced. We call page() on the page
     // element to make sure it is always enhanced before we
     // attempt to enhance the listview markup we just injected.
     // Subsequent calls to page() are ignored since a page/widget
     // can only be enhanced once.
     $page.page();

     // Enhance the listview we just injected.
     $content.find(":jqmData(role=listview)").listview();

     // We don't want the data-url of the page we just modified
     // to be the url that shows up in the browser's location field,
     // so set the dataUrl option to the URL for the category
     // we just loaded.
     options.dataUrl = urlObj.href;

     // Now call changePage() and tell it to switch to
     // the page we just modified.
     $.mobile.changePage($page, options);
  }
}

Answer 1

您忘记创建一个静态页面，您要在其中动态追加项目。如果您需要这种方式，可以在导航到选择列表项之前动态创建页面。

if ($('body').find('[data-role=page]#update').length === 0) {
  $('<div/>', {
    'data-role': 'page',
     id: 'update',
    'data-theme': 'e'
  }).appendTo('body');
}

JQM - 如何克服TypeError：t.data（...）未定义

1 个答案: