排序器

Ranker标签用于对List标签中的项目进行排序，或根据嵌套的Bucket标签从List中选取相关项目。 在简单的List + Ranker标签组合中，前者会变为交互式列表，保存结果为字典格式，其中键为标签名称，值为按新顺序排列的ID数组。 使用Bucket时，可以将List中的任何项目移动到这些分组中，最终分组将以字典形式导出：{ 分组名称-1: [该分组中的ID数组], ... } 默认情况下，所有项目将保留在List中且不会被导出，除非它们被移动到某个分组。但通过default="true"参数，您可以指定一个默认分组，所有项目将自动归入该分组，因此导出结果始终会包含列表中的所有项目，并按分组归类。 可以通过Style标签使用相应的.htx-ranker-column和.htx-ranker-item类来设置列和项目的样式。列标题在Bucket标签的title参数中定义。 注意：当使用不带default参数的Bucket时，原始列表也会以"_"命名的列存储在结果中，但这是内部值，后续可能会更改。

参数

参数	类型	描述
name	string	Name of the element
toName	string	List tag name to connect to

示例

视觉外观可以通过Style标签使用这些预定义的类名进行更改

<View>
  <Style>
    .htx-ranker-column { background: cornflowerblue; }
    .htx-ranker-item { background: lightgoldenrodyellow; }
  </Style>
  <List name="results" value="$items" title="Search Results" />
  <Ranker name="rank" toName="results" />
</View>

示例

Ranker标签的示例任务数据

{
  "items": [
    { "id": "blog", "title": "10 tips to write a better function", "body": "There is nothing worse than being left in the lurch when it comes to writing a function!" },
    { "id": "mdn", "title": "Arrow function expressions", "body": "An arrow function expression is a compact alternative to a traditional function" },
    { "id": "wiki", "title": "Arrow (computer science)", "body": "In computer science, arrows or bolts are a type class..." }
  ]
}

示例

Ranker标签的示例结果

{
  "from_name": "rank",
  "to_name": "results",
  "type": "ranker",
  "value": { "ranker": { "rank": ["mdn", "wiki", "blog"] } }
}

示例

使用带有Ranker标签的Buckets示例

<View>
  <List name="results" value="$items" title="Search Results" />
  <Ranker name="rank" toName="results">
    <Bucket name="best" title="Best results" />
    <Bucket name="ads" title="Paid results" />
  </Ranker>
</View>

示例

使用带分桶的Ranker标签的示例结果；数据相同

{
  "from_name": "rank",
  "to_name": "results",
  "type": "ranker",
  "value": { "ranker": {
    "best": ["mdn"],
    "ads": ["blog"]
  } }
}