REST API:主干和定制终端

时间:2017-05-14 作者:Lucio Crusca

我试图弄清楚如何从插件的JS代码中调用REST API自定义端点。这是我刚刚编写的一个示例插件的PHP代码,以显示我的问题。文件名为rest-api-sample.php:

<?php
/**
 * @link              https://www.virtualbit.it
 * @since             1.0.0
 * @package           Rest-API-Sample
 *
 * @wordpress-plugin
 * Plugin Name:       Rest API Sample
 * Plugin URI:        https://www.virtualbit.it/rest-api-sample
 * Description:       Just a code sample
 * Version:           1.0.4
 * Author:            Lucio Crusca
 * Author URI:        https://www.virtualbit.it
 * License:           GPL-2.0+
 * License URI:       http://www.gnu.org/licenses/gpl-2.0.txt
 * Text Domain:       rest-api-sample
 * Domain Path:       /languages
 */

class IESRestEndpoint 
{
  private $namespace = "ies/v1";
  public function __construct()  {
     add_action( \'rest_api_init\', array($this, \'registerRoutes\')); 
     add_action( \'wp_enqueue_scripts\', array($this, \'enqueue_scripts\'));
  }

  public function istermactive(WP_REST_Request $request)  {
    $result = true;
    return $result; // this is my controller.
  }

  public function registerRoutes()  {
    register_rest_route( $this->namespace, 
                         \'/istermactive/\', 
                          array(\'methods\' => \'GET\',
                                \'callback\' => array($this, \'istermactive\')
                               )
                       );
  }

  public function enqueue_scripts() {    
    $handle = "ies-rest-api";
    $jsfileurl = plugin_dir_url( __FILE__ ) . \'/ies.js\';
    wp_register_script($handle, $jsfileurl, array("underscore", "backbone", "wp-api"));    
    $local_data = array(\'apiRoot\' => get_rest_url(), "namespace" => $this->namespace);
    wp_localize_script($handle, "ies_rest", $local_data);
    wp_enqueue_script($handle);
  }  
}

$ies_endpoint = new IESRestEndpoint();
这是ies.js 代码:

(function( $ ) {
  \'use strict\';

  $(document).ready(function()
  {  
    wp.api.init({\'versionString\' : ies_rest.namespace,  \'apiRoot\': ies_rest.apiRoot}).done(function()
    { 
      wp.api.loadPromise.done(function () 
      {
        wp.api.namespace(ies_rest.namespace).istermactive().done(function (active)
        {
          alert(active);
        });
      });
    });    
  });

})( jQuery );
然而,WP 4.7.4/4.7.5中的这段JS代码在调用wp.api.init() 在它到达呼叫之前wp.api.loadPromise():

Uncaught TypeError: _.includes is not a function
    at wp-api.min.js?ver=4.7.4:1
    at Function.h.each.h.forEach (underscore-min.js?ver=4.7.4:1)
    at Object.wp.api.utils.decorateFromRoute (wp-api.min.js?ver=4.7.4:1)
    at wp-api.min.js?ver=4.7.4:1
    at Function.h.each.h.forEach (underscore-min.js?ver=4.7.4:1)
    at n.constructFromSchema (wp-api.min.js?ver=4.7.4:1)
    at n.<anonymous> (wp-api.min.js?ver=4.7.4:1)
    at n.<anonymous> (backbone.min.js?ver=1.2.3:1)
    at n.<anonymous> (underscore.min.js?ver=1.8.3:5)
    at _ (backbone.min.js?ver=1.2.3:1)
使用WP 4.8beta2的相同代码似乎至少在达到wp.api.namespace() 呼叫,我在哪里得到:

Uncaught TypeError: wp.api.namespace is not a function
    at Object.<anonymous> (https://www.virtualbit.it/wp-content/plugins/rest-api-sample//ies.js?ver=4.8-beta2:10:16)
    at i (https://www.virtualbit.it/wp-includes/js/jquery/jquery.js?ver=1.12.4:2:27449)
    at Object.add [as done] (https://www.virtualbit.it/wp-includes/js/jquery/jquery.js?ver=1.12.4:2:27748)
    at Object.<anonymous> (https://www.virtualbit.it/wp-content/plugins/rest-api-sample//ies.js?ver=4.8-beta2:8:26)
    at i (https://www.virtualbit.it/wp-includes/js/jquery/jquery.js?ver=1.12.4:2:27449)
    at Object.fireWith [as resolveWith] (https://www.virtualbit.it/wp-includes/js/jquery/jquery.js?ver=1.12.4:2:28213)
    at Object.e.(anonymous function) [as resolve] (https://www.virtualbit.it/wp-includes/js/jquery/jquery.js?ver=1.12.4:2:29192)
    at Object.<anonymous> (https://www.virtualbit.it/wp-includes/js/wp-api.min.js?ver=4.8-beta2:1:13404)
    at i (https://www.virtualbit.it/wp-includes/js/jquery/jquery.js?ver=1.12.4:2:27449)
    at Object.fireWith [as resolveWith] (https://www.virtualbit.it/wp-includes/js/jquery/jquery.js?ver=1.12.4:2:28213)
我的JS文件(ies.JS)甚至没有在4.7的堆栈跟踪中提到。x异常,而在4.8beta2中,这似乎是一个简单的语法错误,但我不知道应该如何调用我的端点。

我认为这可能是一个WP bug(可能是一个文档bug),于是我打开了一个bug报告。事实证明这不是一个WP错误,所以这个问题仍然需要答案,但Adam,谁回答了我的错误报告,给了我们some valuable informations.

至于建议birgire 很遗憾,我不知道如何使用QUnit 代码,也许你可以带我看看?

如果要尝试此示例插件,you can find it here, 而且,如果您感兴趣,可以在以下位置调试JS代码:my website homepage, 已安装此示例插件的位置(截至撰写本文时,WP版本为4.8beta2)。

4 个回复
最合适的回答,由SO网友:Adam Silverstein 整理而成

看起来您正在尝试向/istemactive端点发送POST请求,是否正确?(我想您可能想删除端点的尾部斜杠?)

我不确定wpapi客户端是否是标准ajax帖子的正确工具,您可能需要使用jQuery。ajax或使用WordPress的助手wp-ajax.

wp api客户端旨在帮助您在从wp-api检索时与项目集合或单个项目(如post或post)进行交互。它通过解析API模式来创建主干模型和集合。Check here 对于某些文档(需要一些更新)。

SO网友:hwl

前面的回答:

您的JS似乎没有加载。您已注册脚本,但尚未将其排队。添加wp_enqueue_script 注册之后。您还可以使用wp_localize_script 将依赖项传递给脚本,并使php中的变量对其可用。

上述两项功能均与codex相关。

SO网友:y_power

第一个错误似乎与Underscore.js, 您应该尝试添加下划线(和主干线)作为脚本的依赖项:

wp_register_script($handle, $jsfileurl, array("underscore", "backbone", "wp-api"));

SO网友:Lucio Crusca

根据赏金描述的要求(例如,使用backbone.js),我试图做的事情的解决方案并不存在。根据Adam Silverstein(核心WP开发人员)在此处的回答以及通过私人消息,我现在已经了解到:

  1. namespace() 在WP捆绑的RESTAPI客户端(backbone.js)中根本不存在,如果我想发布到PHP函数,我必须使用标准的ajax调用如果我使用backbone,我应该交换wp.api.initwp.api.loadPromise 电话,例如。loadPromise 之前init.the same client 我在后面的WP API plugin 使用当前Rest API的天数namespace() 函数返回
结束

相关推荐

如何解决多个文件的“消除上面的呈现阻塞的JavaScript和CSS”的内容?

我在google insight中查看我的网站时发现:还行吧?但我仍在考虑修复Eliminate render-blocking JavaScript and CSS in above-the-fold content 在手机上也能取得好的效果。我正在使用以下代码添加CSS、JS文件:/* loading the default styles of the theme */ function theme_style_sheets() { wp_enqueue_style( \'go