用户登录

这个视频我们去创建一个内容页面,在点击内容列表里的某个内容的时候,会打开这个内容页面,在这个页面上显示具体的东西,比如内容的标题,正文,作者等等。

前面我们已经开启了服务的 node retrieve 资源 ,可以使用 myservice/node 再加上节点 id 的形式来请求指定节点上的内容。

在内容列表里,可以添加一个 data-nid 的属性,然后在点击内容列表里的内容标题的时候,获取到这个 data-nid 属性的值,也就是节点的 id。

事先定义一个可以显示内容的函数,点击标题去执行这个函数,同时把 nid 作为调用这个函数的一个参数,这样在显示内容的这个函数里,可以利用这个 id ,这样使用 myservice/node 加上这个 id ,就可以得到对应的节点内容了。

检查服务资源

先打开 Drupal 网站,结构,服务,编辑一下 myservice,确定在这里已经勾选了 node 里面的 retrieve ....

index.html

再回到应用项目 .. 打开 index.html ,我事先在添加了一个新的页面,就是这个内容页面。页面的 id 是 node,在页面的头部,有一个空白的 h1 标签,上面有一个 node-page-title 类, 一会儿可以把内容的标题放在这个容器里。

页面的主体部分上,有一组 div 标签,上面添加了一个 node-page-body 类。

index.js

打开 index.js 。先去定义一个用来显示内容的函数 ... 可以叫它 displayNode ... 这个函数可以授受一个 nid 参数 ... 在这个函数里面,使用 jQuery 的 ajax 方法,去请求相应的内容 ...

这个请求的地址是网站的服务地址,后面加上 node ,再加上节点的 id ,这个 nid 会在调用这个 displayNode 函数的时候传递过来。也就是我们点击了哪个内容,这个 nid 就会是哪个内容的 id 。

请求的类型是 GET,数据的类型是 json ... 请求成功以后,把请求得到的数据输出到控制台上 ...

调用 displayNode

下面,我们要决定在什么情况下去调用这个显示节点的函数。在显示内容列表这个函数里 ... 先去改造一下输出的列表项目 ... 修改一下列表项目链接的地址 ... #node ,这样点击列表标题,会打开显示内容的页面 ...

再添加一个 node-title 类 .. 一会儿要用到它给标题绑定一个点击的事件 ... 再添加一个 data-nid 属性 ... 这个属性是我们自己定义的 ... 属性的值就是节点的 id 号。

'<li><a href="#node" class="node-title" data-nid=' +
nodes[i].node.nid + '>' +
nodes[i].node.title +
'</a></li>';

下面去给 node-title 绑定一个点击事件,点击以后,先获得所点击 data-nid 属性的值,这个值就是节点的 id ,然后把这个 id 作为一个参数,去调用显示内容的函数。

// 得到所点击的节点的 id
$('.node-title').click(function () {
var nid = $(this).attr('data-nid');
displayNode(nid);
});

预览

下面先去预览一下 ... 保存文件 .. 打开浏览器 ... 刷新一下 ... 然后点击首页上的内容列表里的某个内容的标题 ... 它会触发点击事件,获取到 data-nid 属性的值,再用这个值作为一个参数,去调用显示内容的 displayNode 函数 ...

在控制台上,你会看到所点击的这个节点的相关数据 。 打开这个数据对象 ... 你可以自己决定使用这里面的哪一些内容 ..

比如,我们可以在内容的页面上先输出内容的标题 .... 标题的内容在 title 这个属性里面 ..

index.js

回到应用项目 ... 找到 displayNode 这个函数 ... 先获取到想要显示内容标题的地方 .. 再调用 html 方法,去设置一下里面的内容 ...

内容是在 data 这个对象的 title 属性里面 .. $('.node-page-title').html(data.title);

下面再去找到内容的正文 .. (#浏览器) 正文的内容是在 body 这个对象里面 ... und 这个数组 .. 数组里的第 1 个项目 ... 项目里的 safe_value 应该就是我们想要的内容正文了。

回到 index.js ... 找到想要显示正文的容器 ... 调用它的 html 方法 ... 设置一下里面的内容 ...

$('.node-page-body').html(data.body.und[0].safe_value);

预览

保存 ... 下面再回到浏览器上预览一下 ... 回到首页 ... 刷新一下 ... 点击列表里的一个项目 ... 会打开内容页面 ... 在内容的页面上,可以显示出所点击的具体的内容。

显示内容的页面《 Drupal Services 整合外部应用 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点