是否有方法在不刷新页面的情况下动态更改Twig块中的内容？

Question

我不确定我的标题是否准确，所以我会尽力在此解释。

我试图做的是用Ajax调用我的控制器，并让它在页面上更改内容而不重新加载（内容由块定义）。因此，对于一个松散的例子，在主页的到来，网页的内容是：

# routing.yml 
StackQuestionBundle_osgs_home: 
    pattern:/
    defaults: { _controller: StackQuestionBundle:Pages:index } 
    options: 
     expose: true 

StackQuestionBundle_osgs_page: 
    pattern: /page 
    defaults: { _controller: StackQuestionBundle:Pages:page } 
    options: 
     expose: true 

---

<!-- @StackQuestionBundle:Pages:index.html.twig --> 
<header> 
    {% block title %} <!-- Title --> {% endblock %} 
    <nav> </nav> 
</header> 

<main> 
    <aside> <!-- Sidebar --> </aside> 
    <section>   
     {% block content %} <!-- Main Content -->{% endblock %} 
    </section> 
</main> 


<footer> 
    {% block footer %} <!-- content --> {% endblock %} 
    <nav> </nav> 
</footer> 

---

// JS 
$('nav button.test').click(function() { 
    $.ajax({ 
     url: "{{ path('OSGSBundle_osgs_page') }}", 
     type: "POST", 
     success: function(data) { 
      //Change the content in the blocks! 
      //alert("It worked!") 
     } 
    }); 
}); 

---

# PagesController.php 

namespace MyNameSpace\StackQuestionBundle\Controller; 
use Symfony\Bundle\FrameworkBundle\Controller\Controller; 
use Symfony\Component\HttpFoundation\Request; 

class PagesController extends Controller 
{ 
    public function indexAction() 
    { 
     return $this->render('OSGSBundle:Pages:index.html.twig'); 
    } 
    public function pageAction(Request $request) 
    { 
     $isAjax = $this->get('Request')->isXMLHttpRequest(); 
     if ($isAjax) 
     { 
      // Replace/Append the content in index.html.twig with the content from page.html.twig 
     } 
     else 
     { 
      // Load page normally if navigated to http://localhost/page 
      return $this->render('OSGSBundle:Pages:page.html.twig'); 
     } 
    } 
} 

---

这是我的目前的代码看起来像。到目前为止，我已经设法只根据DOM元素替换数据。所以，我会替换我的<main>标签中的所有信息。我只想替换我的Twig块标记中的内容。附注：我使用FOSJSRoutingBundle来更改网址。

在此先感谢，我感谢帮助/建议。我希望这不是太混乱。

Answer 1

1）添加新的树枝文件为您块：myblock.html.twig

2）更新您的控制器

if ($isAjax) 
{ 
    return $this->render('OSGSBundle:Pages:myblock.html.twig'); 
} 

Answer 2

我想有改变通过JavaScript树枝块没有通用的方法，因为JavaScript是客户端，枝是服务器端。

您必须通过将块包装在div或任何具有id的标签中手动执行此操作。

<section id="block-content">   
     {% block content %} <!-- Main Content -->{% endblock %} 
</section> 

那么你可以申请正常的AJAX行为，使服务器的响应上一个AJAX模板，如toine指出并与ID的元素改变的内容。