README

加载更多 实现⏳，适用于 Silverstripe 的前端组件🌀。易于使用和自定义。

可用的 Taz 命令

如果您之前没有使用过 Taz🌪️，必须在您的根项目文件夹中提供 taz 文件 cp vendor/goldfinch/taz/taz taz

扩展模型使其可加载

php taz loadable

创建可加载模板

php taz make:loadable-template

安装

1. 安装模块

composer require goldfinch/loadable

2. 将密钥添加到您的 .env

使用 Taz🌪️ 生成和添加密钥。

php taz generate:app-key

3. 生成配置文件

使用 Taz🌪️ 生成配置。它将快速引导您完成设置，并为您处理。

php taz loadable

4. 确保这些元标签出现在您的标题中

<meta name="csrf-param" content="authenticity_token">
<meta name="csrf-token" content="{$SecurityID}">

5. 实现JavaScript前端组件

通过 Silverstripe Requirements PHP

Requirements::javascript('goldfinch/loadable:client/dist/loadable.js');

通过模板 require

<% require javascript('goldfinch/loadable:client/dist/loadable.js') %>

通过 ES6 模块

import Loadable from '..../vendor/goldfinch/loadable/client/src/src/loadable-mod';
// import Loadable from '@goldfinch/loadable/client/src/src/loadable-mod'; // with alias

document.addEventListener('DOMContentLoaded', () => {
  new Loadable();
});

// vite.config.js
// * only if you use alias import above

import { defineConfig } from 'vite';

export default defineConfig(({ command, mode }) => {

  return {

    // ..

    resolve: {
      alias: [
        { find: '@goldfinch', replacement: fileURLToPath(new URL('./vendor/goldfinch', import.meta.url)) },
      ],
    },

    // ..

  };
});

6. 创建一个可加载模板（供参考）

如上所述的第三步中的 Taz 命令将为您创建模型的可加载模板，因此您实际上不需要在这里做任何事情。只是供您参考，如果您对模板的启动方式感到好奇

所有可加载模板都存储在单个文件夹 templates/Loadable 中。名称应与您的目标模型名称相同。

示例

为 app/Models/MyLoadableModel.php 创建的可加载模板将是 themes/my_theme/templates/Loadable/MyLoadableModel.ss

(❗) 每个模板中的内容必须以具有 data-loadable-list-item 属性的标签开始，该属性表示单个可加载项

<div data-loadable-list-item>
  <!-- my custom code goes here -->
</div>

实际案例示例

<a href="{$Link}" data-loadable-list-item>
  $Image
  <h3>$Title</h3>
</a>

用法

要调用可加载区域，请使用以下示例之一进行进一步自定义

方法 1（快速预览以测试）

$LoadableAs(App\Models\MyLoadableModel)

方法 2（基本）

<% with $LoadableWith(App\Models\MyLoadableModel) %>
  <div data-loadable-area>
    $List
    <div>
      $Action
    </div>
  </div>
<% end_with %>

方法 3（完全可自定义）

<% with $LoadableWith(App\Models\MyLoadableModel) %>
  <div data-loadable-area>
    <% with Data %>
    <div data-loadable-list data-loadable-remains="$CountRemains">
      <% loop List %>
        $loadableTemplate
      <% end_loop %>
    </div>
    <div>
      <button
        data-loadable-action
        data-loadable-params='{"search": "some search value"}'
        data-loadable-stock="{$LoadableObject}"
        data-loadable-substance="{$LoadableMethod}"
        data-loadable-substance-id="{$LoadableMethodID}"
        data-loadable-scroll-offset="100"
        data-loading="false"
        class="btn btn-primary"
        type="button"
      >
        <span class="d-none spinner-border spinner-border-sm" aria-hidden="true"></span>
        <span role="status">Load more<span data-loadable-remaning></span></span>
      </button>
    </div>
    <% end_with %>
  </div>
<% end_with %>

方法 4（桥接 - 通过类方法列表）

要使用此方法，我们需要进行一些额外设置

通过传递 $ID 和 $Method 调用可加载实例

$LoadableAs(App\Models\ProjectCategory, $ProjectCategoryID, Projects)
$LoadableWith(App\Models\ProjectCategory, $ProjectCategoryID, Projects)

在此示例中，Projects 是 ProjectCategory 模型中的一个方法，它返回 DataList。它可以是基本自定义方法或 has_many/many_many/belongs_many_many

class ProjectCategory {
    
    // as relationship
    private static $belongs_many_many = [
        'Projects' => ProjectItem::class,
    ];

    // or as custom method
    public function Projects()
    {
        // return $this->Projects();
        return ProjectItem::get();
    }
}

将 bridge 添加到我们的配置中

Goldfinch\Loadable\Loadable:
  loadable:
    App\Models\ProjectItem:
      initial_loaded: 10
      per_each_load: 10
      bridge:
        App\Models\ProjectCategory: Projects

其他选项

如 initial_loaded、per_each_load 之类的属性可以在数据库中声明。使用 SomeConfig。如果您使用 Taz🌪️ 命令 php taz loadable，它将处理此设置，但供您参考

我们必须在配置中指定 dbconfig，如下例所示

Goldfinch\Loadable\Loadable:
  loadable:
    App\Models\MyLoadableModel:
      dbconfig:
        App\Configs\MyConfig:
          initial_loaded: InitialLoaded
          per_each_load: PerEachLoad

根据上面的示例，我们的 MyConfig 类将如下所示

use JonoM\SomeConfig\SomeConfig;
use SilverStripe\ORM\DataObject;
use SilverStripe\View\TemplateGlobalProvider;

class MyConfig extends DataObject implements TemplateGlobalProvider
{
    use SomeConfig;

    private static $db = [
        'InitialLoaded' => 'Int(10)',
        'PerEachLoad' => 'Int(10)',
    ];
}

备注

手动扩展模型

如果您不想使用 LoadableExtension 扩展，您可以准备您的可加载模型

use SilverStripe\ORM\DataList;
use SilverStripe\Control\HTTPRequest;

public static function loadable(DataList $list, HTTPRequest $request, $data, $config): DataList
{
    // apply some additional filtering to the list as needed

    return $list;
}

public function loadableTemplate()
{
    return $this->renderWith('Loadable/MyLoadableModel');
}

事件

可用的 JavaScript 回调事件

window.goldfinch.loadmore_before_callback = (action) => {
  console.log('loadmore before', action)

  let list = action.closest('[data-loadable-area]').children('[data-loadable-list]')

  // ..
}

window.goldfinch.loadmore_after_callback = (action) => {
  console.log('loadmore after', action)

  let list = action.closest('[data-loadable-area]').children('[data-loadable-list]')
  
  // ..
}

许可

MIT 许可证（MIT）

goldfinch / loadmore

维护者

详细信息