javascript - 在单页 Web 应用程序中实现无逻辑的 Javascript 模板

Question

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

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

Answer 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 秒自动重绘表单，并在这样做之前将表单状态存储在内存中，使用完全无逻辑的模板。非常简单的示例，但希望它能为您提供一些运行思路。