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

【问题标题】：Achieving logic-less Javascript templates in a single page web app在单页 Web 应用程序中实现无逻辑 Javascript 模板
【发布时间】：2012-02-08 22:51:03
【问题描述】：

我正在使用 underscore.js 模板，我发现我的模板中需要逻辑来控制它们的呈现。一个例子可能是确保表单的状态在模板重新渲染中得到保留和正确渲染。

有人对如何最好地减少模板中的逻辑有任何提示吗？这甚至是一个可取的目标吗？

【问题讨论】：

我的模板也有同样的问题。这是关于为什么需要减少逻辑的问题：link

标签： javascript templates

【解决方案1】：

我通常使用 Backbone 执行此操作，这样可以节省一些精力，但由于您的问题中没有提到它，这里有一个简短的示例，说明我如何使用无逻辑的表单模板并仅使用下划线和 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 秒自动重绘一次表单，并在此之前将表单状态存储在内存中，使用完全无逻辑的模板。非常简单的示例，但希望它能给您一些运行思路。

【讨论】：