Question

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

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

我没有接触替换部分b / c我无法从JQuery Mobile的pageshow（）事件中访问JSON数据，即使是在加载页面的事件序列中触发的最后一个事件。 / p>

以下是我的代码的简化版本。我正在使用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
    }

});

Answer 1

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

如果无法在JSON回调中执行所有这些初始化，那么您可以尝试使用jQuery的data（）函数来存储页面中某些DOM元素所需的JSON位。 http://api.jquery.com/jQuery.data/

这有帮助吗？

Answer 2

我很难使用data()，甚至jqmData()执行此操作，而应使用data()代替{{1}}。来自文档：

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

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

在JQuery Mobile pageshow（）事件上访问JSON数据

2 个答案: