CakePHP2中点击按钮如何向element传递对应$object参数

前提说明 #

$this->element() 是CakePHP服务端模板渲染方法，仅在页面首次加载时执行，前端点击事件触发时无法直接调用该方法传入新的$object参数，可根据业务场景选择以下两种实现方案：

方案1：预渲染所有详情块（适合数据量较小的场景） #

遍历对象列表时提前渲染所有对象的详情内容，默认全部隐藏，点击按钮时仅展示对应ID的详情内容：

• index.ctp 代码修改：

// 遍历所有对象
foreach ($objects as $object) {
    // 渲染对象基础信息卡片
    echo $this->element('object', ['object' => $object]);
    // 预渲染对应详情块，添加ID标识、默认隐藏
    echo '<div class="detail-panel" data-object-id="'. h($object->id) .'" style="display:none">';
    echo $this->element('details', ['object' => $object]);
    echo '</div>';
}

• 前端JS代码修改：

$(document).on("click", ".detail-button", function(e) {
    var object_id = $(this).data('id');
    // 隐藏所有详情块
    $('.detail-panel').hide();
    // 仅展示当前点击对象对应的详情块
    $(`.detail-panel[data-object-id="${object_id}"]`).show();
    slider.slideReveal("show", function() {});
});

方案2：AJAX动态请求详情（适合数据量大、详情字段多的场景） #

新增单独接口动态查询对象详情并渲染详情元素返回，点击按钮时异步拉取对应内容插入公共容器展示：

1. 控制器新增接口（示例为ObjectsController.php）：

public function getDetail($id) {
    // 校验请求是否为AJAX
    if (!$this->request->is('ajax')) {
        throw new ForbiddenException('非法请求');
    }
    $object = $this->Object->get($id);
    $this->set(compact('object'));
    // 直接渲染details元素返回，不加载全局布局
    $this->render('/Elements/details');
}

2. index.ctp 新增公共详情容器：

<!-- 所有对象共用的详情容器，默认隐藏 -->
<div id="common-detail-container" style="display:none"></div>

3. 前端JS代码修改：

$(document).on("click", ".detail-button", function(e) {
    var object_id = $(this).data('id');
    // 异步请求对应对象的详情内容
    $.get(`/objects/get-detail/${object_id}`, function(detailHtml) {
        // 插入详情内容后弹出弹窗
        $('#common-detail-container').html(detailHtml);
        slider.slideReveal("show", function() {});
    });
});

内容的提问来源于stack exchange，提问作者Sirivs