0

我正在开发一个单页 JQuery Mobile 网站。在加载 JSON 数据并在客户端操作 DOM 时，JQuery 初始化最初设置为 false。加载内容并操作 DOM 后，初始化 JQuery Mobile。

初始化后，我计划使用 Ben Alman 的 replaceText 插件将 JSON 放入输出的 HTML 中的一些占位符中，因此像“XXFIRST_NAMEXX”这样的占位符变成了“John Smith”。

我还没有得到替换部分 b/c 我无法从 JQuery Mobile 的 pageshow() 事件中访问 JSON 数据，即使在加载页面的事件序列中触发的最后一个事件也是如此。

下面是我的代码的简化和注释版本。我正在使用 JQuery 1.7.1 和 JQuery Mobile 1.1.0 我在这里缺少什么？谢谢！

// jQuery Mobile initialization
$(document).bind("mobileinit", function () {
    //prevent JQM from initializing until after content has been loaded in .getJSON callback;
    $.mobile.autoInitializePage = false;
});

$( document ).bind( "pageshow", function( event, data ){
    console.log('pageshow fires'); //fires 4th

    //DROP-INS
    //need to replace text within manipulated and initialized html
    var resplaceScope, strDisplayName, strSchoolName, strOfferTitle; 
    replaceScope = $('body *');
    //collect variables from json data
    strOfferTitle = data.content.offer_vars.offer_title; //ERROR Uncaught TypeError: Cannot read property 'offer_vars' of undefined 
    replaceScope.replaceText( /XXOFFER_TITLEXX/gi, strOfferTitle );
});

$(document).ready(function(){

    console.log('document.ready fires'); //fires 1st

    $.getJSON('io_content.json', function(data) {
        console.log('getJSON fires'); //fires 2st
        getContent(data);
        // ... once code is manipulated by getContent, Jquery is ready to initialize
        $.mobile.initializePage();
    });

    function getContent(data){
        console.log('getContent fires'); //fires 3rd
        // ... code to manipulate content client side before jquery mobile initializes
    }

});
4

2 回答 2

1

我不完全确定发生了什么，但是您是否期望传递给“pageshow”回调的“data”参数与“getJSON”回调中的“data”变量相同？它们是恰好都被命名为“数据”的不同对象。来自“pageShow”的那个只有一个“prevPage”属性，其中包含对 DOM 元素的引用，该元素代表刚刚导航离开的页面。getJSON 回调中的那个具有您从数据源获得的实际数据；一旦回调完成执行，它就消失了。

如果无法在 JSON 回调中完成所有这些初始化，那么您可以尝试使用 jQuery 的 data() 函数将您需要的 JSON 位存储在页面中的某个 DOM 元素上。http://api.jquery.com/jQuery.data/

这有帮助吗？

于 2012-07-20T16:26:25.000 回答
1

我很难用data(). 或什至jqmData()应该使用哪个来代替data(). 从文档：

使用 jQuery Mobile 时，应使用 jqmData 和 jqmRemoveData 代替 jQuery 核心的 data 和 removeData 方法（注意这包括 $.fn.data、$.fn.removeData 和 $.data、$.removeData 和 $ .hasData 实用程序），因为它们会自动合并命名空间数据属性的获取和设置（即使当前没有使用命名空间）。

为了克服这个问题，我将数据存储在 getJSON 回调中的 LocalStorage 中，然后可以从 pageShow 访问它

于 2012-07-20T16:29:15.840 回答