Symfony2에서 조각과 같은보기 사용

Question

데이터베이스에 두 개의 테이블이 있습니다. 그 중 하나에는 응용 프로그램 사용자가 포함되어 있고 다른 하나는 ManyToOne 관계에 대한 일부 의료 보고서를 보관하므로 모든 사용자는 정보 테이블에서 임의의 수의 의료 보고서를 가질 수 있습니다.

화면 왼쪽에는 사용자 이름 목록이 표시됩니다. 할 일은 간단합니다. 그 중 하나의 이름을 누를 때마다 의료 데이터를 보여주는 또 다른 페이지로 이동하고 다시 사용자 목록을 가져와야합니다. 그러나이 정보를 동일한보기에 표시하고 싶습니다. 왼쪽에있는 이름을 클릭 할 때마다 오른쪽에 자신의 데이터가 표시되고 다른 사용자를 클릭하면 이전 사용자의 정보 사라지고 새가 표시됩니다. 이전 HTML iframe이나 새로운 Android 4 조각과 비슷한 동작을 원합니다.

Symfony2/Twig에서 가능합니까?

Answer 1

Twig는 템플릿 엔진 일 뿐이며 서버 측에서 구문 분석되고 원시 HTML/CSS/JS가 브라우저에 반환되므로 Twig에서 사용자와의 상호 작용을 작성할 수 없습니다.

Symfony는 서버 측 프레임 워크로, 서버 측에서 파싱되고 원시 HTML/CSS/JS가 브라우저로 반환된다는 것을 의미하므로 Symfony를 통해 사용자와 상호 작용을 작성할 수 없습니다.

JavaScript와 같이 클라이언트 측 스크립트를 사용해야합니다. AJAX 요청을 작성하여 문제를 해결할 수 있습니다. AJAX는 URL을 요청하고 페이지의 URL 내용을 표시합니다. AJAX는 JavaScript의 가장 중요한 크로스 브라우저 중 하나이기 때문에 MooTools 또는 jQuery와 같은 라이브러리를 사용하는 것이 좋습니다.

AJAX 요청에 대해 RESTful API를 만드는 것이 좋습니다. /users/{id}과 같은 사용자 정보가 표시되어야합니다. 당신은 사용자 데이터를 가져 오기 위해 해당 URL에 AJAX 요청을 만들 지금

<?php 
// src/Acme/DemoBundle/Controller/UserController.php 
namespace Acme\DemoBundle\Controller; 

use Symfony\Bundle\FrameworkBundle\Controller\Controller; 
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route; 

class UserController extends Controller 
{ 
    // ... 

    /** 
    * @Route("https://stackoverflow.com/users/{id}") 
    */ 
    public function showAction($id) 
    { 
     // select user by id 
     $user = ...; 

     // renders the user data 
     $this->render('AcmeDemoBundle:User:show.html.twig', array('user' => $user)); 
    } 
} 

을 그리고 :이 경우, 사용자 데이터를 표시하는 컨트롤러를 생성하고이 /users/{id} 경로에 매핑

<ul> 
    <li><a class="js-show-user" data-id="1">Joren</a></li> 
    <li><a class="js-show-user" data-id="2">Wouter</a></li> 
    <!-- ... --> 
</ul> 
<div id="js-user-data"></div> 

<!-- ... include jquery --> 
<script> 
jQuery(function($) { 

    var output = $('#js-user-data'); 

    $('.js-show-user').click(function(e) { 
     jQuery.ajax({ 
      url: '/users/' + $(this).data('id'), // request the correct url 
      success: function (result) { 
       output.html(result); // output the result 
      }, 
     }); 
    }); 

}); 
</script>