JQM - 如何克服TypeError：t.data（...）未定义 [英] JQM - How to get over TypeError: t.data(...) is undefined

问题描述

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

In JQuery Mobile, I created a dynamic listview that should create dynamic pages depending on which item is clicked. I managed to get the listview up and running but the dynamic page problem is giving me a headache because of this error:

TypeError：t.data（...）is undefined

TypeError: t.data(...) is undefined

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

...ollapsiblebound",!0).bind("expand collapse",function(t){var n=t.type==="collapse...

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

I get this on Firebug everytime I try and navigate to a dynamic page. The code I am using to create the listview is this one (and it seems to work fine):

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");

以及我用于cr的代码单击列表视图中的项目来完成页面非常类似于此页面上的页面： http://jquerymobile.com/demos/1.1.1/docs/pages/page-dynamic.html

And the code I am using to create the pages from clicking in an item from the list view is very similar to the one on this page: 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);
  }
}

推荐答案

你忘了创建一个静态页面，您想要动态地附加项目。如果你想要这种方式，你可以在选择列表项之前导航到它之前动态创建一个页面。

You forgot to create a static page where you want to append your items to dynamically. You can create a page dynamically if you want this way, before navigating to it, upon selecting a list item.

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

这篇关于JQM - 如何克服TypeError：t.data（...）未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！