javascript - Symfony2 - 更改页面内容 - 像 Ajax

Question

我正在像这样评估我的模板中的 ArrayCollection:

{% for article in articles %}
   <li
      {% if article.new %}
         class="new"
      {% endif %}
   >{{ article.name|e }}</li>
{% endfor %}

现在我想重新加载文章 ArrayCollection 而不是重新加载整个页面，就像您在 Ajax 中所做的那样。是否可以重新加载它，让 twig 像上面那样循环评估所有文章？

我想用twig来评估内容

Answer 1

这是可能的，是的。您只需要向将返回呈现的集合的操作发出 ajax 请求。这可以通过创建新操作(推荐)或在请求中添加新参数来实现，这些参数将告诉 twig 渲染或不渲染哪个部分(更容易做，更难维护)。

编辑

扩展我的答案是因为作者要求我这样做。

让我们假设 News Controller 在 YourNs\YourBundle它的内容应该看起来像这样:

class NewsController extends Controller
{

    /**
     * @Route("/articles")
     * @Template()
     */
     public function listAction(){
         $articles = $this->yourMethodToFindArticles();
         return compact('articles');
     }
}

接下来要做的是通过添加 YourNs/YourBundle/Resources/views/News/list.html.twig 文件并填充它来呈现此操作。

完成后，您需要添加功能来启动 ajax 请求以获取刷新的文章集合。 FOSJsRouting也可能对此有用。

您可以向 Controller 添加新操作

    /**
     * @Route("/_api/articles-list")
     * @Template()
     */
     public function apiListAction(){
         $articles = $this->yourMethodToFindArticles();
         return compact('articles');
     }

并使其模板仅呈现您的收藏。

或者参数化你的第一个 Action 并根据它渲染模板:

{% if app.request.query.get('partial') %}
Template elements
{% endif %}
{% for article in articles %}
<li
  {% if article.new %}
     class="new"
  {% endif %}
>{{ article.name|e }}</li>
{% endfor %}
{% if app.request.query.get('partial') %}
Other template elements
{% endif %}

第二种解决方案明显不如第一种，尤其是当您开始使用 esi 标签时，如果您这样做，您的代码将如下所示:

class NewsController extends Controller
{

    /**
     * @Route("/articles")
     * @Template()
     */
     public function listAction(){
         return [];
     }

    /**
     * @Route("/_api/articles-list")
     * @Template()
     */
     public function apiListAction(){
         $articles = $this->yourMethodToFindArticles();
         return compact('articles');
     }
}

和 listAction() 模板:

Template elements
{{ render_esi(url('yourns_yourbundle_news_apilist' }}
Other template elements

请注意，上面的代码片段只是一个解释琐碎问题的简化解决方案。

编辑2

使用 FOSJsRouting 的抓取示例，带有 api 操作的 js 代码:

var url = Routing.generate('yourns_yourbundle_news_apilist')
var fetchedCollection = $.get(url);

以及带有参数化模板的示例:

var url = Routing.generate('yourns_yourbundle_news_list', {'partial': 'true'})
var fetchedCollection = $.get(url);