1

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

我试图做的是用 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 来更改 URL。

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

4

2 回答 2

1

我想没有通过 javascript 更改 twig 块的通用方法，因为 javascript 是客户端，而 twig 是服务器端。

您必须通过将块包装在 div 或任何带有 id 的标签中来手动完成。 

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

然后，您可以应用正常的 ajax 行为并在服务器上为响应呈现一个 ajax 模板，正如 toine 指出的那样，并使用 id 更改元素中的内容。

于 2013-03-14T09:03:30.880 回答
1

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

2）更新你的控制器

if ($isAjax)
{
    return $this->render('OSGSBundle:Pages:myblock.html.twig');
}
于 2013-03-13T22:47:43.323 回答