Backbone.js客户端

最后更新于：2021-11-29 11:43:05

Backbone JavaScript Client

The REST API includes a JavaScript/Backbone client library.

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

该库通过为通过API结构公开的所有端点提供骨干模型和集合，为GC REST API提供了一个接口。

使用

激活GC-API插件。直接对脚本进行排队：

gc_enqueue_script( 'gc-api' );

或者作为脚本的依赖项：

gc_enqueue_script( 'my_script', 'path/to/my/script', array( 'gc-api' ) );

库解析根端点（“结构”），并创建匹配的骨干模型和集合。您现在有两个根对象：gc.api.models和gc.api.collections。

这些模型和集合包括：

模型:
* Category 类别
* Comment 评论
* Media 媒体文件
* Page 页面
* PageMeta
* PageRevision 页面修订版本
* Post 文章
* PostMeta
* PostRevision 文章修订版本
* 结构
* Status 状态
* Tag 标签
* Taxonomy 分类学
* Type 类型
* User 用户

集合:
* Categories 类别
* Comments 评论
* Media 媒体文件
* PageMeta
* PageRevisions 页面修订版本
* Pages 页面
* Posts 文章
* Statuses 状态
* Tags 标签
* Taxonomies 分类学
* Types 类型
* Users 用户

您可以按原样使用这些端点使用标准骨干方法（获取、同步、保存和销毁模型、同步集合）读取、更新、创建和删除项目。您还可以扩展这些对象，使其成为您自己的对象，并在它们上面构建您的结构。

默认值

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

gc.api.models.Post.prototype.args

author: null 作者
comment_status: null
content: null 内容
date: null 日期
date_gmt: null
excerpt: null 摘录
featured_image: null
format: null 格式
modified: null 修改时间
modified_gmt: null
password: null 密码
ping_status: null
slug: null
status: null 状态
sticky: null
title: null 标题

可用方法

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


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

可接受的选项

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

gc.api.collections.Posts.prototype.options

author
context
filter
order
orderby
page
per_page
search
status

本地化API结构

客户端将接受并使用本地化结构作为gcApiSettings对象的一部分。默认情况下，结构目前不传递；相反，客户端向API发出ajax请求以加载结构，然后将其缓存在浏览器的会话存储中（如果有）。使用本地化架构激活启用SCRIPT_DEBUG的客户端js插件。检查client-js示例或此分支，该分支试图为每个客户端仅本地化一次结构。

等待客户端加载

客户端启动是异步的。如果api结构是本地化的，客户端可以立即启动；如果没有，客户端会发出ajax请求来加载结构。客户端公开了负载承诺，以提供可靠的等待客户端准备就绪：


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

示例:

要创建文章并编辑其类别，请确保您已登录，然后：


// Create a new post
var post = new gc.api.models.Post( { title: 'This is a test post' } );
post.save();

// Load an existing post
var post = new gc.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 gc.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"

Expand full source code Collapse full source code

Collection examples:

要获取最后10篇文章：


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

要获取最后25篇文章：


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

使用过滤器更改订单和订单选项：


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的所有修订：


var revisions = new gc.api.collections.PostRevisions({}, { parent: 1 });

修订集合也可以通过父母的集合访问。此示例提出2个HTTP请求，而不是一个，但现在原始文章及其修订版可用：


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

如果您向API添加自定义端点，它们也将作为模型/集合可用。例如，当您将REST API支持添加到自定义文章类型时，您将获得新模型和集合。注意：由于结构存储在用户的会话缓存中，以避免重新获取，您可能需要打开一个新选项卡才能获得结构的新读取。

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