ロジックなしのJavascriptテンプレートを1ページのWebアプリケーションで実現

Question

私はアンダースコアを使用しています.jsテンプレートを使用しています。テンプレートのロジックが必要です。 1つの例は、テンプレートの再レンダリング全体にわたってフォームの状態が保持され、正しくレンダリングされるようにすることです。

誰でもテンプレートのロジックを最適にする方法についてのヒントはありますか？これは望ましい目標ですか？

Answer 1

それはあなたの質問には言及していないので、私は一般的にいくつかの努力を保存するバックボーンでこれを行うが、ここで私はlogiclessフォームテンプレートを使用して、唯一のアンダースコアとjQueryを使用して値をmantainかもしれない方法の簡単な例です：

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秒ごとに自動的にフォームを再描画し、完全にロジックのないテンプレートを使用する前に、フォームの状態をメモリに書き留めます。非常に単純化された例ですが、うまくいけばそれを実行するためのアイデアがあります。