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

问题描述

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

未捕获的类型错误:无法读取未定义的属性 'jQuery162027575719612650573'

数字永远不会相同...

我想知道我在页面加载ajax内容后是否使用正确的方法来解析listview.错误似乎是在加载有轻微延迟并且完成事件触发得太快并且我的列表视图当时还没有在 DOM 中时触发的，只是一个猜测.在 ajax 调用后初始化列表视图的推荐方法是什么?

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

这里是我的空伪页面:

<div data-role="header"><h1><g:message code="pd.playlist"/></h1>
<div data-role="content"></div>

在它的正下方有一个脚本标签，在 pageshow 上绑定一个 ajax 调用来激活列表视图

updatePlaylistTemplate 返回这个(提取):

<li data-icon="删除"><a href="javascript:void(0);"onclick="loadGet('urlToRemoveProdiver',$('#playlist'),doOnCallBack);">Provider: Bell</a><li data-icon="删除"><a href="javascript:void(0);"onclick="loadGet('urlToRemoveChannel',$('#playlist'),doOnCallBack);">Rock - 经典摇滚</a><li data-icon="refresh" data-theme="e"><a href="javascript:void(0);"onclick="loadGet('urlToReloadPlaylist',$('#playlist'),doOnCallBack)">刷新列表</a></li><li data-role="list-divider">下一首歌曲</li><li><a href="urlToViewSongInfo"><img src="images/song.gif"/><h3>阿尔伯特·弗莱瑟</h3><p>猜猜是谁</p><p class="ui-li-aside">下一步</p></a><li data-role="list-divider">正在播放</li><li><a href="urlToviewSongInfo"><img src="images/song.gif"/><h3>世纪之罪</h3><p>Supertramp</p><p class="ui-li-aside">14h49</p></a><li data-role="list-divider">以前的歌曲</li><li><a href="urlToViewSongInfo"><img src="images/song.gif""/><h3>亡命之徒</h3><p>爱丽丝·库珀</p><p class="ui-li-aside">14h45</p></a>[...]

解决方案

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

<块引用>

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

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

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

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

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

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

注意 create 事件有一个重要的区别和一些小部件具有的刷新方法.create 事件适合用于增强包含一个或多个小部件的原始标记.这一些小部件的刷新方法应该用于现有的(已经增强)以编程方式操作的小部件并且需要更新 UI 以匹配.

例如，如果您有一个页面，您动态地附加了一个新的页面创建后具有 data-role=listview 属性的无序列表，在该列表的父元素上触发 create 将转换它进入一个列表视图风格的小部件.如果有更多的列表项以编程方式添加，调用列表视图的刷新方法将仅将那些新列表项更新为增强状态并保留现有列表项保持不变.

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

您还可以复制 jQuery Mobile 创建的输出并使用该结构，而不是使用 <li> 标签并依赖 jQM 对其进行初始化:

<li data-role="list-divider" class="ui-li ui-li-divider ui-btn ui-bar-a ui-btn-up-undefined" role="heading"><span>列表分隔符</span></li><li data-theme="b" class="ui-li ui-li-static ui-body-b">常规LI</li>

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:

Uncaught TypeError: Cannot read property 'jQuery162027575719612650573' of undefined

The number is never the same...

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?

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

so here is my empty pseudo page:

<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>

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>

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> 

解决方案

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

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.

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.

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:

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

Create vs. refresh: An important distinction

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.

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.

Link: http://jquerymobile.com/blog/

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屋！