下面我们一起把前面用视图得到的一个 JSON 格式的内容列表显示到应用的主页上。先定义一个可以载入内容列表的函数，函数做的事就是用 jQuery 的 ajax 方法去请求列表的地址，成功以后用一个 for 循环，把获得的数据输出到页面上。然后再去设置一下在什么情况下去执行这个显示内容列表的函数，可以在页面显示以后，如果活动页面是 front ，也就是首页的时候，去执行它。
loadArticleList
下面先去定义这个显示内容列表的函数，可以叫它 loadArticleList ... 里面用一个简单的 ajax 方法 ... 因为这个请求是一个简单的 GET 请求，不需要去验证 CSRF 。
请求的地址是 http://127.0.0.1/drupal/article-list .. 类型是 GET .. 要求返回的数据的类型是 json ，错误的时候，去执行 onError .... 请求成功以后 ... 可以先请求回来的数据先简单的输出到控制台上看一下 ...
/**
* 内容页面
*/
function displayNode(nid) {
$.ajax({
url: 'http://127.0.0.1/drupal/myservice/node/' + nid,
type: 'GET',
dataType: 'json',
error: onError,
success: function (data) {
console.log(data);
}
});
}
调用 loadArticleList
在这个文件的下面，我们在之前的视频里已经用到了 jQueryMobile 的 pagecontainershow 这个事件 ... 它会在页面完全显示以后被触发 ...
在这个 switch 语句里，再去定义一种情况 ... 当活动的页面是 front ，这个 front 是在首页上的那个容器里定义的 ID，也就是如果活动页面是首页的话 ...
去执行一下刚才我们定义的 loadArticleList 这个函数。
case 'front':
loadArticleList();
break;
预览
先保存一下这个文件 ... 回到浏览器 ... 打开应用的首页 ... 在控制台上，你会看到请求成功以后返回来的数据 ... jQuery 已经给我们把数据转换成了 JavaScript 的对象形式...
打开以后，里面是一个 nodes 属性 .. 这个 nodes 属性的值是一个数组 ... 再打开里面的一个数组项目... 每个数组项目里都有一个 node 属性，node 在 Drupal 里就是内容的意思。
这个属性的值又是一个对象，在这个 node 对象里，有我们想要的 nid ，内容的 id 号，还有 title，内容的标题...
循环
下面再回到应用项目... 可以先看一下应用的首页的 html ，打开 index.html，这个 id 是 front 的 div 容器就是应用的首页。在这个页面的主体部分里面，我添加了一个空白的 ul 标签，这个标签上定义了 article-list 这个 id ，可以使用这个 id 来定位这个 ul 容器，通过代码把想要的东西添加到这个容器里。
这个 ul 无序列表，用到了 jQueryMobile 的 listview 。
回到 index.js ... 在 loadArticleList 这个函数里，请求成功以后要做的事情里面 ... 先定义几个一会要用到的变量 ...
var i,
nodes = data.nodes,
articleList = document.getElementById('article-list');
下面再用一个传统的 for 语句，去输出得到的数据 ... 在这个 for 循环里面 ... 设置 articleList 的 innerHTML ，也就是它的内部的 html 内容。这个 articleList 就是用来显示文章列表的那个无序列表容器。
每次循环的时候，就把一组内容是 内容标题 的列表，添加到这个容器里面。
for (i = 0; i < nodes.length; i += 1) {
// console.log(data.nodes[i].node.title);
articleList.innerHTML +=
'<li><a href="#node" class="node-title" data-nid=' +
nodes[i].node.nid + '>' +
nodes[i].node.title +
'</a></li>';
}
输出内容的标题，我们用了一个 nodes[i].node.title ... nodes 是在前面定义的变量 ... 它其实是 data.nodes ...
往 jQueryMobile 的列表视图里添加了新的项目以后，我们需要刷新一下它才能够正常的显示 .. 可以调用 listview 的 refresh 方法 ...
// 刷新列表视图
$('#article-list').listview('refresh');
预览
保存 ... 回到浏览器 ... 打开应用的首页 ... 然后刷新一下 ... 如果一切都成功的话，会在首页上显示出内容的列表 ... 这个内容的列表里数据是通过 views_datasource 模块创建的。
