jQuery Mobile初始化列表视图的正确方法 [英] jQuery Mobile proper way to initialize a listview

问题描述

这是我的问题.我的索引中有一些硬编码的伪页面.有些填充了内容，有些填充了内容，只有用户通过ajax进行填充.此ajax内容包含html列表.当他们加载时，它们没有漂亮的jquery移动外观，因此我必须调用.listview()方法，以便jqm框架在我的ajax回调中对其进行解析.那是我经常收到此JS错误的地方:

Here is my problem. I have a few hard coded pseudo pages in my index. Some filled with content, some empty which will be filled on user interaction only by ajax. This ajax content contains html lists. When they load they don't have the nice jquery mobile look so I have to call a .listview() method so the jqm framework parse it on my ajax callback. That is where I often get this JS error:

未捕获的TypeError:无法读取未定义的属性'jQuery162027575719612650573'

Uncaught TypeError: Cannot read property 'jQuery162027575719612650573' of undefined

数字永远不会相同...

The number is never the same...

我想知道在页面加载ajax内容后是否使用正确的方法解析listview.当加载有少许滞后并且完全触发事件为时过早，并且此时我的listview尚未在DOM中时，似乎触发了该错误.在ajax调用后初始化列表视图的推荐方法是什么?

I wonder if I use the proper way to parse a listview after the page loads the ajax content. the error seems to be triggered when there is slight lag for the loading and the complete event is triggered too soon and my listview is not yet in the DOM at that moment, just a guess. what is the recommended way to initialize a listview after an ajax call?

非常不幸，因为当js错误发生时，它似乎冻结了任何进一步的js执行...

It is very unfortunate because when the js error occurs it seems to freeze any further js execution...

这是我的空伪页面:

<div data-role="page" id="playlist" data-add-back-btn="true">
    <div data-role="header">
        <h1><g:message code="pd.playlist" /></h1>
    </div>
    <div data-role="content"></div>
</div>

在其下方有一个脚本标签，该脚本标签在pageshow上绑定ajax调用以激活列表视图

right under it there is a script tag with the bind an ajax call on pageshow to activate the listview

<script type="text/javascript">
$('#playlist').bind('pageshow', function () {
    $.ajax({
        url: "updatePlaylistTemplate.gsp",
        error:function(x,e){handleAjaxError(x,e);},
        beforeSend:function(){$.mobile.showPageLoadingMsg();},
        complete:function(){
            $.mobile.hidePageLoadingMsg();
            $('[data-role="listview"]').listview(); //re-active all listview
        },
        success:function(data, textStatus, jqXHR){
            $('#playlist').find('[data-role="content"]').html(data);
        }
    });
});
</script>

updatePlaylistTemplate返回此内容(提取):

The updatePlaylistTemplate return this (extract):

<ul data-role="listview" data-split-theme="d"> 
    <li data-icon="delete"> 
        <a href="javascript:void(0);" onclick="loadGet('urlToRemoveProdiver',$('#playlist'),doOnCallBack);">Provider: Bell</a> 
    </li> 
    <li data-icon="delete"> 
        <a href="javascript:void(0);" onclick="loadGet('urlToRemoveChannel',$('#playlist'),doOnCallBack);">Rock - Classic Rock</a> 
    </li> 
    <li data-icon="refresh" data-theme="e"><a href="javascript:void(0);" onclick="loadGet('urlToReloadPlaylist',$('#playlist'),doOnCallBack)">Refresh list</a></li> 
    <li data-role="list-divider">Next song</li> 
    <li> 
        <a href="urlToViewSongInfo"> 
            <img src="images/song.gif" /> 
            <h3>Albert Flasher</h3> 
            <p>The Guess Who</p> 
            <p class="ui-li-aside">Next</p> 
        </a> 
    </li> 
    <li data-role="list-divider">Now playing</li> 
    <li> 
        <a href="urlToviewSongInfo"> 
            <img src="images/song.gif" /> 
            <h3>Crime of the Century</h3> 
            <p>Supertramp</p> 
            <p class="ui-li-aside">14h49</p> 
        </a> 
    </li> 
    <li data-role="list-divider">Previous songs</li> 
    <li> 
        <a href="urlToViewSongInfo"> 
            <img src="images/song.gif"" /> 
            <h3>Desperado</h3> 
            <p>Alice Cooper</p> 
            <p class="ui-li-aside">14h45</p> 
        </a> 
    </li>
[...]
</ul> 

推荐答案

您正在使用哪个版本的jQuery Mobile?在最新的beta(1.0b2)中，您可以触发dom元素上的create事件以使框架对其进行初始化:

What version of jQuery Mobile are you using? In the latest beta (1.0b2) you can trigger the create event on a dom element to have the framework initialize it:

新的创建"事件:一次轻松增强所有小部件

New "create" event: Easily enhance all widgets at once

虽然页面插件不再专门调用每个插件，但是它 确实调度了"pagecreate"事件，大多数小部件都使用该事件来 自动初始化自己.只要一个小部件插件脚本是 引用后，它将自动增强小部件的任何实例 就像以前一样，它可以在页面上找到.例如，如果选择菜单 插件已加载，它将增强新发现的所有选择 创建的页面.

While the page plugin no longer calls each plugin specifically, it does dispatch a "pagecreate" event, which most widgets use to auto-initialize themselves. As long as a widget plugin script is referenced, it will automatically enhance any instances of the widgets it finds on the page, just like before. For example, if the selectmenu plugin is loaded, it will enhance any selects it finds within a newly created page.

此结构现在允许我们添加一个新的create事件，该事件可以是 在任何元素上触发，从而节省了手动初始化的任务 该元素中包含的每个插件.到现在为止，如果开发者 通过Ajax或动态生成的标记加载到内容中，它们 手动初始化所​​有包含的插件(列表视图按钮， 选择等)以增强标记中的小部件.

This structure now allows us to add a new create event that can be triggered on any element, saving you the task of manually initializing each plugin contained in that element. Until now, if a developer loaded in content via Ajax or dynamically generated markup, they needed to manually initialize all contained plugins (listview button, select, etc.) to enhance the widgets in the markup.

现在，我们方便的create事件将初始化所有必要的插件 在该标记中，就像页面创建增强一样 过程的工作原理.如果要使用Ajax加载HTML块 标记(例如登录表单)，您可以触发创建以自动 转换它包含的所有小部件(此中的输入和按钮 大小写)添加到增强版本中.此方案的代码为:

Now, our handy create event will initialize all the necessary plugins within that markup, just like how the page creation enhancement process works. If you were to use Ajax to load in a block of HTML markup (say a login form), you can trigger create to automatically transform all the widgets it contains (inputs and buttons in this case) into the enhanced versions. The code for this scenario would be:

$(...包含小部件的新标记...).appendTo(".ui-page" ).trigger("create");

$( ...new markup that contains widgets... ).appendTo( ".ui-page" ).trigger( "create" );

创建与刷新:一个重要区别

Create vs. refresh: An important distinction

请注意，create事件之间存在重要区别 和某些小部件具有的刷新方法. create事件适合 用于增强包含一个或多个窗口小部件的原始标记.这 某些小部件具有的刷新方法应在现有组件上使用 (已增强)已通过编程方式操作的小部件 并需要更新用户界面以使其匹配.

Note that there is an important difference between the create event and refresh method that some widgets have. The create event is suited for enhancing raw markup that contains one or more widgets. The refresh method that some widgets have should be used on existing (already enhanced) widgets that have been manipulated programmatically and need the UI be updated to match.

例如，如果您有一个页面，您在其中动态附加了新的 创建页面后，具有data-role = listview属性的无序列表， 在该列表的父元素上触发创建将对其进行转换 放入列表视图样式的小部件.如果还有更多列表项，那么 以编程方式添加，调用listview的refresh方法将 仅将这些新列表项更新为增强状态，然后将 现有列表项保持不变.

For example, if you had a page where you dynamically appended a new unordered list with data-role=listview attribute after page creation, triggering create on a parent element of that list would transform it into a listview styled widget. If more list items were then programmatically added, calling the listview’s refresh method would update just those new list items to the enhanced state and leave the existing list items untouched.

链接: http://jquerymobile.com/blog/

您还可以复制jQuery Mobile创建的输出并使用该结构，而不是使用<li>标记并取决于jQM将其初始化:

You can also copy the output that jQuery Mobile creates and use that structure rather than using <li> tags and depending on jQM to inititialize it:

<li data-role="list-divider" class="ui-li ui-li-divider ui-btn ui-bar-a ui-btn-up-undefined" role="heading"><span>List Divider</span></li>
<li data-theme="b" class="ui-li ui-li-static ui-body-b">Regular LI</li>

这篇关于jQuery Mobile初始化列表视图的正确方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！