단일 페이지 웹 응용 프로그램에서 로직이없는 자바 스크립트 템플릿 구현

Question

underscore.js 템플릿을 사용하고 있으며 렌더링을 제어하기 위해 템플릿에 논리가 필요하다는 것을 알았습니다. 한 가지 예는 서식의 상태가 유지되고 서식 파일을 다시 렌더링 할 때 올바르게 렌더링되도록하는 것입니다.

내 템플릿의 로직을 줄이는 방법에 대한 조언이있는 사람이 있습니까? 이것은 심지어 바람직한 목표입니까?

Answer 1

나는 일반적으로 어떤 노력을 절약 할 수 백본이 작업을 수행하지만이 질문에 언급되지 이후 나는 여기가 logicless 양식 템플릿을 사용만을 사용하여 값을 mantain하는 방법에 대한 간단한 예는 다음 밑줄 및 jQuery를 :

var app = {}; //namespace 
    app.formData = {}; 
    app.template = '<form id="form"><input type="text" id="first" value="<%= first %>" /><input type="text" id="second" value="<%= second %>" />'; 
    app.storeFormData = function() { 
     if ($('#form').length) { 
      $('#form input').each(function() { 
      app.formData[$(this).attr('id')] = $(this).val(); 
      }); 
     } else { //initialize formData object for first render 
     var form = $(app.template); 
     form.find('input').each(function() { 
      app.formData[$(this).attr('id')] = ''; 
     }); 
     } 
    }; 
    app.render = function() { 
     console.log('rendering'); 
     app.storeFormData(); //stash current state of form before re-rendering 
     $('#formDiv').html(_.template(app.template, app.formData)); 
     _.each(app.formData, function(val, id) { 
      $('#'+id).val(val); 
      }); 
    }; 

    setInterval(app.render, 5000); 

이 코드는 자동으로 5 초마다 양식을 다시 그리기 전에 완전히 논리없는 서식 파일을 사용하여 양식 상태를 메모리에서 숨 깁니다. 매우 단순한 예제이지만 잘하면 실행 계획이 있습니다.