使用 REST API 实现近期文章小工具

在上一篇文章中介绍了 WordPress REST API 的基本概念和内容，本篇文章以此为基础通过 “近期文章” 小工具（Widget）这样一个例子详细说明其具体的使用方法。这个例子将通过 JavaScript 调用 WordPress REST API 获取近期文章列表并以 Widget 的方式显示出来。

首先使用后台管理工具创建一个代码 Widget，填写 HTML 代码如下：

<h2 class="widget-title">Rest Api 近期文章</h2>
<nav id="Rest_Api_Posts" role="navigation" aria-label="Rest Api 近期文章">
</nav>

然后激活并初始化 JavaScript 客户端代码，本例子使用的是 Backbone.js 客户端，该客户端可以放到主题或插件相应的初始化代码中激活，具体方法如下：

function kflyo_load_init() {
	wp_enqueue_script('kflyo', plugins_url( 'kflyo.js' , '/kflyo/js/.'), array('jquery', 'wp-api'));
}
// 插件中初始化
add_action( 'plugins_loaded', 'kflyo_load_init', 10 );
// 主题中初始化，放到 functions.php 中
add_action( 'wp_enqueue_scripts', 'kflyo_load_init' );

最后在自己的 JavaScript 代码文件中放入调用 REST API 的代码如下：

(function( $ ) {
     $(document).ready(function () {
         var postsCollection = new wp.api.collections.Posts();
         //获取文章列表，按日期的降序来排序
         postsCollection.fetch( { data: { orderby: 'date', order: 'desc', per_page: 5 } } ).then(function(result){
             //显示文章列表
             $('#Rest_Api_Posts').append('<ul></ul>');
             for (var i = 0; i < result.length; i++) {
                   if (result[i]) { 
                       $('#Rest_Api_Posts > ul').append('<li><a href="' + result[i].link + '">' + result[i].title.rendered + '</a></li>');
                   }
             }
         });
     });
 })( jQuery );

如果使用 MVC 的模式，代码如下：

1、定义并扩展 View

var Posts_View = Backbone.View.extend({
     events: {
         "click a": 'openpost'
     },
     //监听collection的update事件，post获取后执行render
     initialize: function() {
         this.listenTo(this.collection, "update", this.render);
     },
     render: function() {
         this.$el.empty();
         this.$el.append('<ul>');
         //把post加入到界面元素中
         this.collection.forEach ((mod) => {
            this.$el.children().append('<li><a href="' + mod.get("link") + '">' + mod.get("title").rendered + '</a></li>');
         });
         this.$el.append('</ul>');
         return this;
     },
     openpost: function() {
         console.log('Click post!');
     }
});

2、创建 collection 实例

var postsCollection;
var postsView;
//等待元数据初始化完成，本地没有会到服务器中下载，是异步请求
wp.api.loadPromise.done( function() {
    postsCollection = new wp.api.collections.Posts();
    //监听collection的sync事件，等待fetch model(post)完成
    postsCollection.on("sync", function(colle, res, opt) {
        ...
    });
    //创建View实例，传入postsCollection实例
    postsView = new Posts_View({collection: postsCollection});
});

3、关联 View 到 DOM 元素上

(function ($) {
    $(document).ready( function() {
        postsView.setElement("#Rest_Api_Posts");
        postsCollection.fetch( { data: { orderby: 'date', order: 'desc', per_page: 5 } } );
    });
})(jQuery)