README

🔧 为Nette框架提供的组件，帮助创建懒加载的Ajax组件。

简介

组件初始为空，并通过信号请求进行填充。

安装

使用Composer安装包

composer require infinityloop-dev/lazy-component

依赖

如何使用

创建新组件并扩展 \Infinityloop\LazyComponent\LazyComponent 而不是 \Nette\Application\UI\Control。
触发 handleLoadComponent 以加载和重新绘制组件。
使用宏 {control componentName} 以常规方式渲染您的组件。
此外，使用 {control componentName:loadComponentLink} 获取 loadComponent 信号的URL。
- 这对于渲染URL（例如，在数据属性中）很有用，以便您可以轻松地从JavaScript触发信号。
如果您选择重写，请确保调用 LazyCompoennt::render() 方法。
- 最好使用 beforeRender() 将变量传递到模板。
- 当使用空模板时（当组件未加载时），不调用 beforeRender() 方法。
您的组件模板将自动推断为具有与您的 .php 文件相同的名称（和路径）。
- 文件扩展名简单地更改为 .latte。
默认情况下，使用FontAwesome 5 spinner作为占位符。要使用不同的空模板文件，请重写 EMPTY_TEMPLATE 常量。

示例懒加载标签内容

标签标题

<li class"tab" data-load-component="{control myComponent:loadComponentLink}">Tab name</li>

标签内容

<div class="tab-content">
    {control myComponent}
</div>

点击时执行JQuery Ajax请求

$(".tab[data-load-component]").one('click',function (event) {
    const link = $(this).data("load-component");
    $.nette.ajax({
        method: 'GET',
        url: link,
    });
});

仅执行一次加载事件（jqery.one）。

infinityloop-dev / lazy-component

维护者

详细信息

README

简介

安装

依赖

如何使用

示例懒加载标签内容