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秒自动重绘一次表单，并在执行此操作之前将表单状态存储在内存中，并使用完全无逻辑的模板。非常简单的例子，但希望它能给你一些想法。

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

1 个答案: