在单页web应用程序中实现无逻辑Javascript模板

我正在使用下划线.js模板，我发现我的模板中需要逻辑来控制它们的呈现。一个示例可能是确保表单的状态在重新呈现模板时被保留并正确呈现

---

有人对如何最好地减少我的模板中的逻辑有什么建议吗？这是一个理想的目标吗？

我通常使用主干来实现这一目标，这节省了一些精力，但由于您的问题中没有提到主干，因此这里有一个简单的示例，说明如何使用无逻辑表单模板，并仅使用下划线和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);

var-app={}//名称空间
app.formData={}；
app.template=''；
app.storeFormData=函数（）{
如果（$（'#形式'）。长度）{
$（'#表单输入'）。每个（函数（）{
app.formData[$（this.attr（'id'）]=$（this.val（）；
});
}else{//初始化第一次渲染的formData对象
var form=$（app.template）；
form.find（'input'）。每个（函数（）{
app.formData[$（this.attr（'id'）]=''；
});
}
};
app.render=函数（）{
console.log（'rendering'）；
app.storeFormData（）；//在重新呈现之前隐藏表单的当前状态
$（'#formDiv'）.html（35; template（app.template，app.formData））；
_.每个（app.formData，函数（val，id）{
$（'#'+id）.val（val）；
});
};
设置间隔（app.render，5000）；

---

此代码将每隔5秒自动重新绘制表单，并在执行此操作之前使用完全无逻辑的模板将表单状态隐藏在内存中。这是一个非常简单的示例，但希望它能为您提供一些运行思路。

我的模板中也有同样的问题。以下是关于为什么需要简化逻辑的问题：