ajaxcom bundle下载 - ajaxcom bundle包源代码下载

ajaxcom bundle

其他类别

v3.0.1 twig

下载

Everlution Ajaxcom 捆绑包

安装

第 1 步：下载捆绑包

$ composer require everlutionsk/ajaxcom-bundle

第 2 步：启用捆绑包

 <?php
// app/AppKernel.php

// ...
class AppKernel extends Kernel
{
    public function registerBundles ()
    {
        $ bundles = array (
            // ...

            new Everlution  AjaxcomBundle  EverlutionAjaxcomBundle (),
        );

        // ...
    }

    // ...
}

第 3 步：在 TWIG 布局中包含 Ajaxcom 库 JavasSript

通过npm安装@everlutionsk/ajaxcom-js并将ajaxcom.js包含到您的 TWIG 布局中：

< script type = " text/javascript " src = " {{ asset( ' build/ajaxcom.js ' ) }} " ></ script >

您需要做的最后一件事是在 TWIG 布局中提供一些 JavaScript 处理程序 - 请遵循@everlutionsk/ajaxcom-js文档。

配置

如果您希望使用捆绑包提供的 Flash 消息模板，则无需配置任何内容。

 # all configuration is optional - following values are default
everlution_ajaxcom :
    flash_template : @EverlutionAjaxcom/flash_message.html.twig
    flash_block_id : flash_message
    persistent_class : ajaxcom-persistent
    blocks_to_render : # default value is empty array - when you provide this value, AjaxcomBundle will automatically render these blocks within each AJAX request
          - id : ' content '
          - id : ' navigation '
          - id : ' flash_message '
            refresh : true

默认情况下，AjaxcomBundle 会忽略空块，如果开发人员要求渲染空块，我们会过滤掉这些实例。如果您想重新渲染包含空内容的块，您应该将refresh标志设置为 true，如上面的示例所示。

当您想从控制器设置刷新标志时，您需要首先添加块，然后刷新它：

 <?php

public function exampleAction ()
{
    $ this -> addAjaxBlock ( ' example ' );
    $ this -> refreshAjaxBlock ( ' example ' );
    
    return $ this -> render ( ' some/template ' );
}

该捆绑包与 Bootstrap 3+ CSS 框架配合使用效果最佳。

用法

从EverlutionAjaxcomBundleControllerController扩展您的控制器或将EverlutionAjaxcomBundleControllerAjaxcomTrait特征与您的控制器一起使用以获得 Ajaxcom 功能。

默认情况下， ajaxcom-js库将处理除target="_blank"之外的所有链接点击和所有表单提交。如果您需要更改选择器，或者想要对哪些链接由ajaxcom-js处理、哪些不由 ajaxcom-js 处理，您可以在ajaxcom-js初始化中覆盖默认选择器。请参阅@everlutionsk/ajaxcom-js文档。

例子：

< a href = " https://www.google.com " >External link</ a > <!-- won't be handled by Ajaxcom -->
< a href = " {{ path( ' remove_user ' ) }} " >Remove user</ a > <!-- will be handled by Ajaxcom -->

可以组合以下方法 - 例如。您可以渲染多个块并删除多个块，并根据需要在一个请求中添加任意数量的 JavaScript 回调。

`public function render($view, array $parameters = array(), Response $response = null)`

Everlution 的 Ajaxcom 包扩展了标准 Symfony 的render()方法，因此您可以将 Ajaxcom 与您的项目集成，而无需在代码库中进行任何进一步的更改。

render()方法自动决定是否响应 Ajax 或非 Ajax 调用，因此您无需处理应用程序中的特殊场景。

Ajaxcom 捆绑包将自动处理您的 Symfony 控制器的 Ajax 和非 Ajax 请求操作，因此您无需编写两次代码 - 该捆绑包将始终调用相同的操作。

在标准 Symfony 控制器的操作中，您只需很小的开销即可设置操作的行为来处理 Ajax 请求。接下来的几节将解释开销方法。

`renderAjaxBlock(string $id)`

为了在页面上仅动态渲染一个块，您需要满足以下两个条件：

您要渲染的块包含在树枝block中
twig block包含在 DOM 元素中，其ID与该块同名

默认情况下，TWIG 不支持块名称中的连字符，因此如果您需要在 ID 中使用连字符，我们会自动将连字符转换为下划线。因此，您可以在 ID 中使用连字符以及 TWIG 块的相同名称的组合 - 您只需将连字符替换为下划线即可。示例： id='custom-block'和{% block custom_block %}将由 AjaxcomBundle 自动匹配。

例子：

枝条：

< div id = " list " >
    {% block list %}
        // this is the HTML which will be replaced/removed ...
    {% endblock %}
</ div >

PHP：

 $ this -> renderAjaxBlock ( " list " );

在控制器的操作中，只需调用renderAjaxBlock ，您需要在其中提供块 ID（例如 TWIG 块名称）。

当通过 Ajax 请求调用您的操作时，Ajaxcom 库的 JSON 响应将包含有关应使用哪个 HTML 重新呈现哪个块的信息。

`removeAjaxBlock(string $selector)`

如果您想动态删除某些 DOM 元素，例如从表中删除某些行后，您可以使用removeAjaxBlock()方法，您只需提供要删除的元素的 CSS 选择器即可。

例子：

枝条：

< table >
    < tbody >
        < tr id = " row-1 " >< td >1.</ td ></ tr >
        < tr id = " row-2 " >< td >2.</ td ></ tr >
        < tr id = " row-3 " >< td >3.</ td ></ tr >
    </ tbody >
</ table >

PHP：

 $ this -> removeBlock ( " #row-2 " );

// OR you can use any CSS selector

$ this -> removeBlock ( " tr:nth-child(2) " );

上面的代码（两个示例）将在调用操作后从表中删除中间行。

结果：

< table >
    < tbody >
        < tr id = " row-1 " >< td >1.</ td ></ tr >
        <!-- the #row-2 has been removed -->
        < tr id = " row-3 " >< td >3.</ td ></ tr >
    </ tbody >
</ table >

`addCallback(string $function, array $parameters = [])`

您可以根据需要添加任意数量的 JavaScript 回调。 addCallback()的第一个参数是渲染 HTML 后应调用的函数名称，第二个参数是将作为对象传递给函数的参数数组。

例子：

PHP：

 $ this -> addCallback ( ' Table.init ' , [ ' some ' => ' data ' , ' other ' => [ ' data ' , ' etc ' ]]);

 var Table = function ( ) {
    return {
        init : function ( data ) {
            var some = data . some ;
            var otherArray = data . other ;
            
            // initialize table with provided data
        } ;
    }
} ;

您不一定需要使用此功能

如果您按以下方式编写 JavaScript，则实际上不需要使用此函数：

 // additional.js
var App = {
    additional : function ( ) {
        // some additional functionality
        console . log ( 'executing App.additional' ) ;
    } ,
    // more functions within App namespace
}

App . additional ( ) ;

每次浏览器下载additional.js文件时， App.additional()都会被执行——无论是否使用Ajaxcom 处理请求。您只需要确保通过 Ajaxcom 将<script src="additional.js"></script>添加到需要的 DOM 中。

AjaxcomBundle 会自动将javascripts块中的所有脚本添加到您的页面（它们将插入到代码中最后一个<script>之后）。

`replaceClass()`

您可以通过使用两个参数调用replaceClass()来轻松替换任何您想要的DOM对象中的类 - 第一个是您选择的CSS选择器，第二个是您想要替换当前选择器的类。

`doNotChangeUrl()`

您可以通过调用doNotChangeUrl()轻松避免替换目标页面的 url。

闪讯

Flash 消息由 Ajaxcom 捆绑包自动处理。当通过 Ajax 调用请求时，会话包中的闪烁会自动呈现。

您只需要在树枝布局中的某个位置包含提供的树枝模板：

{% include " @EverlutionAjaxcom/flash_message.html.twig " %}

当您从控制器调用addFlash()时，请使用EverlutionAjaxcomBundleFlash提供 flash 消息类型：

 $ this -> addFlash ( Everlution  AjaxcomBundle Flash:: SUCCESS , ' Your request has been successfully handled by Ajaxcom bundle ' );

// you can use following constants:
// EverlutionAjaxcomBundleFlash::SUCCESS
// EverlutionAjaxcomBundleFlash::ERROR
// EverlutionAjaxcomBundleFlash::WARNING
// EverlutionAjaxcomBundleFlash::INFO

通过 Ajaxcom 发送表单

默认情况下，所有表单均由ajaxcom-js处理。您可以通过在初始化ajaxcom-js时覆盖默认表单选择器来更改此行为。请遵循@everlutionsk/ajaxcom-js文档。

重用数据源

为了在多个选项卡之间重用数据源，您可以通过扩展BaseDataSource轻松创建 Twig 函数。

只需将以下语句添加到您的 services.yml 中：

    AppBundleDataProvider :
        resource : ' ../../src/AppBundle/DataProvider '
        tags : ['twig.extension']

您可以指定项目中所需的任何文件夹。在此示例中，我们选择了AppBundleDataProvider命名空间。

这个命名空间中扩展EverlutionAjaxcomBundleDataSourceBaseDataSource的每个类都会通过反射扫描带有后缀Provider的公共方法，并且我们从这些方法创建简单的 Twig 函数。让我们看一下例子：

 // AppBundleDataProviderExample.php

// simple function which returns static array
public function navigationProvider () {
    return [ 
        // some data... 
    ];
}

// you can use parametrical functions and injected services as well
public function userProfileProvider ( int $ id ) {
    return $ this -> someService -> getData ( $ id );
}

创建此类后，您可以简单地调用 twig 中的函数：

{{ dump (navigation()); }} {# will dump static array #}

{% for item in userProfile( 2 ) %}
   {{ dump ( item ) }}
{% endfor %}

最佳实践

如果您想无缝使用 AjaxcomBundle，您应该将@EverlutionAjaxcomlayout_bootstrap_4.html.twig复制到您的项目（例如 AppBundle）并根据您的需要进行修改。

这样，AjaxcomBundle 将为您处理诸如替换 JavaScript、StyleSheets 和 MetaTags 等任务。

使用自动替换 JS、CSS、Meta 和 Title

当您使用@EverlutionAjaxcomlayout_bootstrap_4.html.twig中的块时，您应该已完成所有设置。

当您决定手动设置布局时，以下部分将帮助您了解自动替换的工作原理。

替换 JavaScript

每个页面上应包含的所有 JavaScript 都需要包含class='ajaxcom-persistent' （或您在捆绑包配置中设置的任何内容）
您要扩展的主布局必须包含{% block javascripts %}{% endblock %}
当您扩展主布局并重写javascripts块时，AjaxcomBundle 会自动为您加载此块中的脚本

替换样式表

与 JavaScript 相同，每个页面上应包含的所有样式表都需要包含class='ajaxcom-persistent' （或您在捆绑包配置中设置的任何内容）
您要扩展的主布局必须包含{% block stylesheets %}{% endblock %}
当您扩展主布局并重写stylesheets块时，AjaxcomBundle 会自动为您加载此块中的样式

替换元标签和标题

每个页面上应该出现的所有元标记都需要包含class='ajaxcom-persistent' （或您在捆绑包配置中设置的任何内容）
您要扩展的主布局必须包含{% block metatags %}{% endblock %}
当您扩展主布局并重写metatags块时，AjaxcomBundle 会自动为您加载此块中的元标记
如果您想更改页面title ，您的布局需要包含<title>{% block title %}{% endblock %}</title>并且您需要在扩展主模板的模板中重写title块

待办事项

添加复杂的使用示例

展开

附加信息

版本 v3.0.1 twig
类型其他类别
更新时间 2025-01-13
大小 50MB
来自于 Github