서버와 클라이언트 간의 HTML 재사용

Question

웹 사이트를 개발 중입니다. 서버 측에서는 HTML을 조작/생성하기 위해 Python (및 Genshi)을 사용하고 있습니다. 하지만 나는 같은 종류의 HTML 조각을 자바 스크립트를 사용하여 클라이언트 쪽에서 조작하고있는 것으로 나타났습니다.

예제를 보여 드리겠습니다.

<form .... > 
<ul> 
    <li id="i1">Name: <input type="text" name="i1" value="Item 1" /> <a href="#">[del]</a></li> 
    <li id="i2">Name: <input type="text" name="i2" value="Item 2" /> <a href="#">[del]</a></li> 
</ul> 
<a id="addnew" href="#">[new]</a> 
</form> 

참고 : 나는 항목의 편집 가능한 목록을 가지고 가정하자 [new] 앵커 동적 폼에 새 항목을 추가합니다. 서버에 대한 요청을하지 않아도됩니다.

서버와 클라이언트 모두이 "템플릿"(의사 코드)를 알고있다 :

<li id="${id}">Name: <input type="text" name="${name}" value="${val} " /> <a href="#">[del]</a></li> 

서버는 초기 HTML 목록을 만드는 알고 있으며, 클라이언트는 알고있다 사용자가 앵커를 사용하여 항목을 추가 및 제거 할 수있게합니다.

이와 같은 시나리오에서 재사용을 개선하기위한 모범 사례는 무엇이라고 생각하십니까? 나는 이미 내가 피할 싶습니다 알고

---

어떤 접근 방법 :

• 자바 스크립트를 사용하여 초기 목록을 작성. 사용자 상호 작용의 일부만 개선하기 위해 자바 스크립트를 사용하려고합니다
• Genshi와 붙어있어서 클라이언트와 서버간에 재사용 할 수있는 템플릿 언어를 사용합니다.
• 서버 측에서 Javascript 생성. 이전에 시도했는데 간접적 인 추가 수준으로 인해 디버그하는 것이 어려움

Answer 1

초기 자리 표시자를 사용하여 숨겨진 div에 HTML을 저장하는 방법은 자바 스크립트를 사용하여 UI의 보이는 부분에 복사하는 방법 자리 표시자를 AJAX 응답으로 바꿉니다. 응답은 JSON (키/값 쌍 목록) 일 수 있습니다.

Answer 2

아마도 새 항목을 추가 할 때 서버에 데이터를 보내기 위해 Ajax 호출을하고있을 것입니다. 한 가지 방법은 HTML 조각을 해당 호출에 대한 응답으로 반환하는 것입니다. 해킹은 약간 있지만 자바 스크립트를 생성하는 것보다 적습니다.

작성한 항목에 대해 Location 헤더와 함께 201 Created 응답을 반환하는 것이 더 쉬운 방법입니다. 그런 다음 자바 스크립트는 Accept 헤더가있는 리소스를 요청하여 HTML 조각을 나타내는 사용자 지정 미디어 유형을 지정합니다. 이렇게하면 비즈니스 로직과 프리젠 테이션이 분리되므로 다른 유형의 HTML 조각이 필요한 여러 페이지의 항목을 추가 할 수 있습니다.

Answer 3

이것은 다소 길지만, genshi2js을 조사 할 수 있습니다. genshi 템플릿의 하위 집합을 자바 스크립트 함수 (Google의 간장 템플릿과 유사)로 컴파일한다고 주장합니다. 불행히도 그것은 버려진 프로젝트 인 것 같습니다. 그것의 주요 링크는 404이지만 위 링크에서 수은 저장소를 찾을 수 있었고 마지막 활동은 2008 년이었습니다.

일반적으로이 문제를 해결하는 가장 좋은 방법은 동일한 템플릿 시스템을 사용하는 것입니다. JS와 서버 측 구현이 모두 있어야합니다.(이것은 또한 Google soy 템플릿 뒤에있는 아이디어입니다. 자바와 js 구현입니다.)