본문 바로가기

Web/Javascript32

[Javascript template]자바스크립트 템플릿 엔진/handlebars/template engine/웹템플릿/예제/example 1. Handlebars 1.1 정의-mustache 템플릿 언어 기반으로 만들어진 확장 템플릿-동적으로 HTML을 생성해주는 logic less 템플릿 엔진이다.-view와 code를 분리하기 위해 만들어졌다. 로직과 presentation의 분리.-자바스크립트 코드 안에 html element를 넣지 않기 위해 사용한다. 1.2 장점 및 단점1.2.1 장점(1) 자바 스크립트 파일의 비지니스 로직에서 템플릿을 분리하여 HTML 페이지를 유지한다.(2) 애플리케이션의 구조를 개선한다 (유지 보수 및 확장 용이)(3) precompile 할 수 있기때문에 성능개선에 도움을 준다.(4) 빠르다. 참고url >> https://travis-ci.org/wycats/handlebars.js/builds/333.. 2016. 9. 28.
[Javascript template]자바스크립트 템플릿 엔진/Mustache/template engine/웹템플릿/예제/example 1. Mustache1.1 정의-동적으로 HTML을 생성해주는 간단한 웹 템플릿 엔진 (logic-less template)-view와 code를 분리하기 위해 만들어졌다. 로직과 presentation의 분리-구분자로 사용하는 {,}기호가 콧수염 모양이라 붙여진 이름 1.2 장점 및 단점1.2.1 장점(1) 다양한 언어 set을 제공한다.-지원언어 : Ruby, JavaScript, Python, Erlan, node.js, PHP, Perl, Objective-C, Java, .NET, Android, C++, Go, Lua, ooc, ActionScript, ColdFusion, Scala, Clojure, Fantom, CoffeeScript, D, Haskell, XQuery, ASP, Io, .. 2016. 9. 28.
[Javascript template] javascript template engine/자바스크립트 템플릿 엔진/maven test 환경 자바스크립트 템플릿 엔진 ajax로 요청하여 데이터를 가져오고 JSON 형태로 데이터를 받아 html 템플릿을 생성 및 분리하고 그 코드를 받아 html을 동적으로 생성하여 그려주고자 한다. 말이 어려운가? 그렇다면 이 자바스크립트 템플릿 엔진을 왜 사용하고자 했을까???? 라는 질문에 서부터 이 포스팅을 시작하려고 한다. 1. 왜 사용할까? 필자는 기존에 다음과 같이, AJAX 통신으로 DATA 응답을 받아 UI를 구성하는 html을 조각을 생성한 후 특정 영역에 삽입하는 식으로 Javascript를 통해 동적인 UI를 처리하고 있었다. 여기서 조금 걸리는 점(?) 은 DOM 조작에 있어 시간소비 및 UI의 공통적인 서비스가 쉽지 않다는 단점이 있으며 소스작성자가 아닌 사람의 view에서는 가독성 문제.. 2016. 9. 26.
[Javascript] 페이징(paging) 공통 UI 소스 /페이징 화면 소스/페이징 자바스크립트 / paging ui [가정 조건]전체 데이터 수 : 27개페이지당 보여줄 데이터 수 : 10개페이지 그룹 범위 : 10 (1~10, 11~20 ,21~30…..)현재페이지 번호 : 1token명 : 편의 지정하시길 해당 소스는 test 소스이다. 실제 사용시에는 Server단에서 totalCnt수를 구하여 사용하셔야 합니다. (1) Paging 함수 호출 보통 필자는 ajax를 통해 가져온 data를 success부분에서다음과 같이 Paging 함수를호출하여 paging을 그립니다. 그리고 앞선 포스팅에 있는 Server단을 사용하시기 위해서는 countPerPage와 pageNo이라는 변수를 서버단으로 보내줘야 합니다. (http://mkil.tistory.com/227)따라서 필자는 보통 아래와 같이 사용합니다. ,ge.. 2016. 9. 6.
[Javascript] opener/부모창과 자식창의 데이터 교환/부모창/자식창/예제 부모창에서 자식창을 팝업으로 열었을 때자식창에서 행해진 Action에 따라 부모창에 영향을 줘야 하는 경우 opener를 사용한다.. opener객체는 자기 창을 연 부모의 window 객체를 참조한다.예제를 적어보자면.. 1. 부모창에서 popup을 통해 자식창 openparent.jsp자식창에서 Action 후 돌아올 function을 하나 만들어 주자 >> completeCallback $(document).ready(function(){ parent.init(); }); var parent ={ init : function(){ //팝업창 오픈 $('#popupOpenBtn).on('click',function (){ var url='' window.open(url,”test”,”height=10.. 2016. 9. 1.
[javascript] 라디오 버튼 제어 1. 특정 라디오 버튼 선택 $("input[id='r4']").on('click',function (){ }); 2. 복수 라디오 버튼 선택 $("input[id='r1'], input[id='r2'], input[id='r3']").on('click',function (){ }); 3. 특정 라디오 버튼 선택되게 $('input:radio[name="testRadio"]:radio[_testYN="Y"]').prop("checked",true); 4. 선택된 값이 있나 체크 If( $('input:radio[name="testRadio"]:radio[_testYN="Y"]').length 2016. 7. 20.

티스토리툴바