被否决

这一部分正在贬值。 代码基础已移动到 amf 组件 模块。 此模块将在 PR 1 常规文件 合并.

自定义元素使一个服务器列表在API规格中编码,由AMF模型提供动力.

版本兼容性

此版本仅与AMF模式版本2(AMF parser QQ 4.0.0)相通.

使用量

安装

npm install --save @api-components/api-server-selector

在 html 文件内

<html>
  <head>
    <script type="module">
      import '@api-components/api-server-selector/api-server-selector.js';
    </script>
  </head>
  <body>
    <api-server-selector amf="..."></api-server-selector>
  </body>
</html>

在一个LitElement中

import { LitElement, html } from 'lit-element';
import '@api-components/api-server-selector/api-server-selector.js';

class SampleElement extends LitElement {
  render() {
    return html`
    <api-server-selector .amf="${this.model}"></api-server-selector>
    `;
  }
}
customElements.define('sample-element', SampleElement);

订阅更改事件

服务器更改事件

该组件发送 apiserverchanged 服务器选择变更时的自定义事件.

element.addEventListener('apiserverchanged', function(e) {
    const { value, type } = e.detail;
    // value is the selected base URI
    // type tells whether it's a server defined value of a custom property
    // This is also the same as const { value, type } = e.target;
});

何时 Custom URL 输入字段发送的更改 api-server-changed 带有输入当前值的事件.

此外,该要素支持 onapiserverchange 事件召回函数设置器 :

element.onapiserverchange = (e) => {
  // ...
};

服务器计数已更改的事件

当一些服务器变换时会发出此事件 .

element.addEventListener('serverscountchanged', function(e) {
    const { value } = e.detail;
    // value is the number of rendered servers
});

element.onserverscountchange = (e) => {
  // ...
};

自定义服务器

有时,除API sepcification中定义的服务器外,主机应用程序可能想要定义选择器中要渲染的附加服务器列表. 这可以涉及与代用服务或模拟服务等组件合作的其他服务.

元素接受列表项为在 API 定义服务器后被插入的子项目 . 我们建议使用 anypoint-item 因为它已经用来建造取精器。 然而,它可以是任何HTML元素. 要提供清单项目,必须 slot="custom-base-uri" 属性。 要在列表中选择项目,它必须具备 value="..." 属性. 如果缺少该值, 则该项会显示, 但选择器不会在列表项上单击 .

<api-server-selector>
  <div slot="custom-base-uri">Other options</div>
  <anypoint-item slot="custom-base-uri" data-value="http://mocking.com">Mocking service</anypoint-item>
  <anypoint-item slot="custom-base-uri"><input type="checkbox"/> Configuration option</anypoint-item>
</api-server-selector>

当您决定使用一个没有数值的列表项目时,单击一个项目不会关闭选择器. 当用户执行与项目相关的动作时, 然后使用 opened 属性在选择器上关闭掉落.

<api-server-selector>
  <div slot="custom-base-uri">Other options</div>
  <anypoint-item slot="custom-base-uri"><input type="checkbox" id="option"/> Configuration option</anypoint-item>
</api-server-selector>

<script>
option.onclick = (e) => {
  e.target.parentNode.opened = false;
};
</script>

发展

git clone https://github.com/advanced-rest-client/api-server-selector
cd api-server-selector
npm install

本地运行演示

npm start

运行测试

npm test