WordPress REST API手册(四 | 6):Backbone.js客户端

REST API 包括一个 JavaScript/Backbone 客户端库。

该库通过为通过 API 模式公开的所有端点提供主干模型和集合来为 WP REST API 提供接口。

使用

激活 WP-API 插件。直接将脚本加入队列:

wp_enqueue_script( 'wp-api' );

或作为脚本的依赖项:

wp_enqueue_script( 'my_script', 'path/to/my/script', array( 'wp-api' ) );

该库解析根端点(“架构”)并创建匹配的主干模型和集合。您现在将有两个可用的根对象:wp.api.modelswp.api.collections.

模型和集合包括:

模型:
* 类别
* 评论
* 媒体
* 页面
* PageMeta
* PageRevision
* Post
* PostMeta
* PostRevision
* Schema
* Status
* Tag
* Taxonomy
* Type
* User

集合:
* 类别
* 评论
* 媒体
* PageMeta
* PageRevisions
* 页面
* 帖子
* 状态
* 标签
* 分类
* 类型
* 用户

您可以使用这些端点按原样使用标准 Backbone 方法(获取、同步、保存和销毁模型,同步集合)来读取、更新、创建和删除项目。您还可以扩展这些对象以使它们成为您自己的对象,并在它们之上构建您的视图。

默认值

每个模型和集合都包含对其默认值的引用,例如:

wp.api.models.Post.prototype.args

  • 作者:空
  • 评论状态:空
  • 内容:空
  • 日期:空
  • 日期时间:空
  • 摘录:空
  • 特色图片:空
  • 格式:空
  • 修改:空
  • modified_gmt:空
  • 密码:空
  • ping_status:空
  • 蛞蝓:空
  • 状态:空
  • 粘性:空
  • 标题:空

可用方法

每个模型和集合都包含相应端点支持的方法列表。例如,创建的模型wp.api.models.Post有一个方法数组:

	
["GET", "POST", "PUT", "PATCH", "DELETE"]

接受的选项

每个模型和集合都包含相应端点接受的选项列表(请注意,选项在创建模型或集合时作为第二个参数传递),例如:

wp.api.collections.Posts.prototype.options

  • 作者
  • 语境
  • 筛选
  • 命令
  • 订购
  • 每页
  • 搜索
  • 地位

顶部↑

本地化 API 模式

客户端将接受并使用本地化模式作为wpApiSettings对象的一部分。Schema 目前默认不传递;相反,客户端向 API 发出 ajax 请求以加载 Schema,然后将其缓存在浏览器的会话存储中(如果可用)。启用启用的 client-js 插件SCRIPT_DEBUG使用本地化模式。检查client-js 示例或此分支,它尝试仅对每个 client 本地化架构一次

等待客户端加载

客户端启动是异步的。如果 api schema 本地化,客户端可以立即启动;如果不是,客户端会发出 ajax 请求来加载模式。客户端公开一个加载承诺,以提供可靠的等待以等待客户端准备好:

wp.api.loadPromise.done( function() {
//... use the client here
} )

模型示例:

要创建帖子并编辑其类别,请确保您已登录,然后:

// Create a new post
var post = new wp.api.models.Post( { title: 'This is a test post' } );
post.save();
 
// Load an existing post
var post = new wp.api.models.Post( { id: 1 } );
post.fetch();
 
// Get a collection of the post's categories (returns a promise)
// Uses _embedded data if available, in which case promise resolves immediately.
post.getCategories().done( function( postCategories ) {
  // ... do something with the categories.
  // The new post has an single Category: Uncategorized
  console.log( postCategories[0].name );
  // response -> "Uncategorized"
} );
 
// Get a posts author User model.
post.getAuthorUser().done( function( user ){
  // ... do something with user
  console.log( user.get( "name" ) );
} );
 
// Get a posts featured image Media model.
post.getFeaturedMedia().done( function( image ){
  // ... do something with image
  console.log( image );
} );
 
// Set the post categories.
post.setCategories( [ "apples", "oranges" ] );
 
// Get all the categories
var allCategories = new wp.api.collections.Categories()
allCategories.fetch();
 
var appleCategory = allCategories.findWhere( { slug: "apples" } );
 
// Add the category to the postCategories collection we previously fetched.
appleCategory.set( "parent_post", post.get( "id" ) );
 
// Use the POST method so Backbone will not PUT it even though it has an id.
postCategories.create( appleCategory.toJSON(), { type: "POST" } );
 
// Remove the Uncategorized category
postCategories.at( 0 ).destroy();
 
// Check the results - re-fetch
postCategories = post.getCategories();
 
postCategories.at( 0 ).get( "name" );
// response -> "apples"

集合示例:

要获取最后 10 个帖子:

var postsCollection = new wp.api.collections.Posts();
postsCollection.fetch();

要获取最后 25 个帖子:

postsCollection.fetch( { data: { per_page: 25 } } );

使用过滤器更改 order 和 orderby 选项:

	
postsCollection.fetch( { data: { 'filter': { 'orderby': 'title', 'order': 'ASC' } } } );

所有集合都支持自动分页,您可以使用以下命令获取下一页结果more

postsCollection.more();

要获取集合的第 5 页:

posts.fetch( { data: { page: 5 } } );

检查集合是否有更多帖子:

posts.hasMore();

使用修订

您可以使用 PostRevisions 或 PageRevisions 集合或通过 Post 或 Page 集合访问帖子或页面修订。

例如,要获取帖子 ID 1 的所有修订的集合:

varrevisions = newwp.api.collections.PostRevisions({}, { parent: 1 });

修订集合也可以通过其父集合访问。此示例发出 2 个 HTTP 请求而不是 1 个,但现在原始帖子及其修订版可用:

var post = new wp.api.models.Post( { id: 1 } );
post.fetch();
post.getRevisions().done( function( revisions ){
  console.log( revisions );
});

如果您将自定义端点添加到 API,它们也将作为模型/集合使用。例如,当您将 REST API 支持添加到您的自定义帖子类型时,您将获得新的模型和集合。注意:因为模式存储在用户的会话缓存中以避免重新获取,您可能需要打开一个新选项卡以获取对模式的新读取。

// Extend wp.api.models.Post and wp.api.collections.Posts to load a custom post type
const CustomPost = wp.api.models.Post.extend( {
  urlRoot: wpApiSettings.root + 'wp/v2/custom_post_slug',
  defaults: {
    type: 'custom_post_slug',
  },
} );
const CustomPosts = wp.api.collections.Posts.extend( {
  url: wpApiSettings.root + 'wp/v2/custom_post_slug',
  model: BLProduct,
} );
const someCustomPosts = new CustomPosts();
someCustomPosts.fetch().then( ( posts ) => {
  // do something with the custom posts
} );

《WordPress REST API手册》完整目录:

THE END
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片