1

次のように、テンプレートで ArrayCollection を評価しています。

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

ここで、Ajax で行うように、ページ全体をリロードせずに、記事の ArrayCollection をリロードします。それをリロードして、上記のようにループ内のすべての記事を twig に評価させることは可能ですか?

小枝を使ってコンテンツを評価したい

4

1 に答える 1

2

可能です、はい。レンダリングされたコレクションを返すアクションに ajax リクエストを行うだけです。これは、新しいアクションを作成する (推奨) か、リクエストに新しいパラメーターを追加して、レンダリングする部分とレンダリングしない部分を twig に指示することによって実現できます (より簡単に、維持するのが難しくなります)。

編集

著者が私に要求したので、私の答えを拡張します。

Newsコントローラーの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も同様に役立つかもしれません。

コントローラーに新しいアクションを追加することができます

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

そして、そのテンプレートがあなたのコレクションだけをレンダリングするようにします。

または、最初のアクションをパラメータ化し、それに応じてテンプレートをレンダリングします。

{% 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 %}

2 番目の解決策は、特に 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 を使用したフェッチの例、js コードと api アクション:

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);
于 2013-08-21T08:37:53.623 に答える