NETTE-LATTE点击触发引入.latte文件并传递动态数据问题咨询

1. Latte引入外部模板传动态参数的方法 #

直接在{include}标签后追加键值对参数即可，参数支持传入静态值或服务端赋值的模板变量，示例：

{include 'data.latte', firma: $firma, customParam: '自定义参数值'}

被引入的data.latte中可以直接通过{$firma}、{$customParam}调用传入的参数。

2. 页面不更新的问题修复 #

你当前的问题核心是AJAX请求仅完成了数据发送，没有处理后端返回的结果，且页面初始渲染的{include 'data.latte'}是服务端一次性生成的静态内容，不会随AJAX请求自动更新，按以下步骤修改即可：

后端调整（Nette 路由逻辑） #

处理data请求的Presenter中，直接返回渲染完成的data.latte HTML片段：

public function actionData()
{
    // 获取前端传入的公司名参数
    $firma = $this->request->getParameter('firma');
    // 你的企业信息查询逻辑，得到查询结果$companyInfo
    $companyInfo = $this->companyService->getInfoByName($firma);
    
    // 给模板赋值参数
    $this->template->firma = $firma;
    $this->template->companyInfo = $companyInfo;
    // 指定渲染data.latte模板，不需要父布局
    $this->template->setFile(__DIR__ . '/templates/path/to/data.latte');
    $this->sendTemplate();
}

前端JS调整 #

给AJAX添加成功回调，把后端返回的HTML片段替换到Modal内容区域：

btn.onclick = function() {
    modal.style.display = "block";
    var firma = $("#firmaName").val();
    console.log( "var is " + firma );
    $.ajax('data', {
        data: { 'firma' : firma},
        success: function(resHtml) {
            // 替换Modal内容
            $('.modal-content').html(resHtml);
        }
    });
}

主Latte模板调整 #

初始加载时不需要提前引入data.latte，可以预留加载提示：

<!-- The Modal -->
<div id="myModal" class="modal">
    <!-- Modal content -->
    <div class="modal-content">
        <span class="close">&times;</span>
        <p>正在查询企业信息，请稍候...</p>
    </div>
</div>

data.latte模板示例 #

直接使用后端传入的参数渲染内容即可：

<h3>查询企业：{$firma}</h3>
{if $companyInfo}
<ul>
    <li>统一社会信用代码：{$companyInfo->creditCode}</li>
    <li>注册地址：{$companyInfo->address}</li>
    <li>法定代表人：{$companyInfo->legalPerson}</li>
    <li>注册资本：{$companyInfo->capital}</li>
</ul>
{else}
<p>未查询到对应企业的公开信息</p>
{/if}

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