web-dev-qa-db-ja.com

REST API：バックボーンとカスタムエンドポイント

私はプラグインのJSコードからREST AP​​Iカスタムエンドポイントを呼び出す方法を見つけようとしています。これが私の問題を示すために書いたサンプルプラグインの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()の呼び出しに達する前に、JSコンソールで例外がスローされます。

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バグ（おそらくドキュメントのバグ）である可能性があると思い、私はバグレポートを開きました。 WPバグではないことがわかったので、この質問にはまだ回答が必要ですが、私のバグレポートに回答したAdamは 有益な情報をいくつか提供しました 。

birgire がコメントで提供した提案に関しては、残念ながら私はQUnitコードを使用する方法についての手がかりを持っていません、多分あなたはそれを通して私を歩くことができますか？

このサンプルプラグインを試してみたい場合は、 ここで見つけることができます 、そして興味がある場合は 私のWebサイトのホームページ でJSコードをデバッグできます。プラグインはすでにインストールされています（これを書いている時点でのWPバージョンは4.8beta2です）。

javascriptrest-api
5
Lucio Crusca

POST要求を/ istermactiveエンドポイントに送信しようとしているようですが、それは正しいですか？ （エンドポイントから末尾のスラッシュを削除したいと思うかもしれません。）

Wp-apiクライアントが標準のajax POSTに適したツールであるかどうかはよくわかりません。jQuery.ajaxを使用するか、WordPressのヘルパー wp-ajax を使用することをお勧めします。

Wp-apiクライアントは、WP-APIから取得したときにアイテムのコレクションまたは単一のアイテム（投稿や投稿など）とやり取りするときに役立つように設計されています。 APIスキーマを解析して、バックボーンモデルとコレクションを作成します。 ここで確認してください いくつかのドキュメント（いくつかの更新が必要です）については。

6
Adam Silverstein

前の答え：

JSがロードされていないようです。スクリプトを登録しましたが、まだキューに入れていません。登録した後に wp_enqueue_script を追加します。 wp_localize_script を使用してスクリプトに依存関係を渡し、phpからの変数を使用できるようにすることもできます。

上記の両方ともこれらの関数のコーデックスにリンクしています。

3
hwl

私がやろうとしていることへの解決策は、賞賛の説明によって要求されるように（例えば、backbone.jsを使用して）存在しません。 Adam Silverstein（core WP developer）がこことプライベートメッセージで答えているとおり、私は今、以下のことを理解しています。

  1. namespace()は単にWPバンドルのRest Apiクライアント（backbone.js）には存在せず、POSTをPHP関数にしたい場合は、標準のAjax呼び出し
  2. バックボーンを使用する場合は、wp.api.initとwp.api.loadPromiseの呼び出しを入れ替える必要があります。 loadPromiseの前にinit。
  3. 私のPHPコードは、backbone.jsを使用したい場合は、モデルとコレクションを定義する必要があります。
  4. しかし、私は 同じクライアントを使うこともできます 現在のRest APIと一緒に WP AP​​Iプラグインで使用していた と私のnamespace()関数を取り戻しました。

Adamのおかげで、あなたは賞金をもらうに値する。

0
Lucio Crusca

最初のエラーは Underscore.js に関連しているようです。スクリプトの依存関係として、アンダースコア（とBackbone）を追加してみてください。

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