使用 JQuery Mobile 和 Json 动态注入页面

Question

感谢您查看我的问题。我是 HTML、JQuery 和 JSON 的新手。我正在尝试通过一些在线教程和 www.lynda.com 培训自学。我正在尝试制作一个词汇表，在页面上动态显示术语列表，单击时会在标题中显示术语及其下方的定义。经过搜索和实验，我取得了进展，我的 ul 从 JSon 对象填充并链接到显示页面。但我不知道如何让显示页面正常工作。我以为答案就在这里：http://jquerymobile.com/demos/1.1.1/docs/pages/page-dynamic.html，但我似乎无法完成它，即使在 Dreamweaver 中也是如此。

这里是 JSFiddle：http://jsfiddle.net/LParker/PSntK/3/

HTML：

    <!-- Glossary -->
<div data-role="page" id="glossary">
<div data-role="header">
     <h3>
        Glossary
    </h3>
</div>
<ul data-role='listview' data-inset='true' id='resultsList'>
<!-- keep empty for dynamically added items -->
</ul>
</div>
    <!-- display -->
    <div data-role="page" id="display">
    <div data-role="header">
         <h3>
            Name Goes Here
        </h3>
    </div>
    <div data-role="content">
    <div>Definition goes here</div>
</div>

JavaScript：

var jsonObject = {
"results": [{

    "term": "Term One",
        "definition": "This is the definition for Term Two",

},

{
    "term": "Term Two",
        "definition": "This is the definition of Term Two",

}, {
    "term": "Term Three",
        "definition": "This is the definition for Term Three",
}],
    "ok": "true"
}

var resultLength = jsonObject.results.length;
var listItems = [];



for (var i = 0; i < resultLength; i++) {
var term = jsonObject.results[i].term;


//Add result to array
listItems.push("<li><a href='#display'>" + term + " </a></li>");
}

//Append array to list and refresh
$('#resultsList').append(listItems.join(' '));
$('#resultsList').listview('refresh');

任何帮助将不胜感激！

Answer 1

首先让我们解决一些问题：

1. 在您的 json 对象的每个 definition 成员之后去掉多余的逗号。
2. 将您的#resultsList 列表视图放入<div data-role="content"></div> 容器中。
3. 提供从#display 页面导航回#glossary 页面的方法，例如通过在 #display 页面的标题中添加标准 jQM 后退按钮 <a data-role="button" data-rel="back" data-icon="back">Back</a>。
4. 在使用 jQM 时，您需要使用正确的event handlers

为简洁起见，我将您的变量 jsonObject 重命名为 json。

您可以以更简洁的方式填充列表视图：

$.each(json.results, function(i, term){
    $('#resultsList').append('<li><a href="#display">' + term.term + '</a></li>')
});
$('#resultsList').listview('refresh');

现在在这种特殊情况下，恕我直言，您不需要注入页面（尽管它肯定是可能的），您可以在 pagebeforeshow 事件上更改 #display 页面中的内容。

为此，由于您的 json 对象全局可用，您只需获取单击列表项的索引，将其传递到您的 #display 页面，使用它访问您的 json 对象的结果数组以提取和显示术语及其定义。 传递索引的最简单方法是使用您在 click 事件处理程序中设置的全局变量。

var currentItem = 0;
...
$('#resultsList li').click(function(){
    currentItem = $(this).index();
});

现在参加pagebeforeshow 活动

$('#display').on('pagebeforeshow', function(){
    $(this).find('[data-role=header] .ui-title').text(json.results[currentItem].term);
    $('#definition').html(json.results[currentItem].definition);
});

终于为你工作了jsFiddle。