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

Achieving logic-less Javascript templates in a single page web app

本文关键字：Javascript 模板 实现 单页 web 应用程序      更新时间：2023-09-26

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

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

我通常用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秒自动重新绘制一次表单，并在这样做之前将表单状态存储在内存中，使用一个完全没有逻辑的模板。非常简单的例子，但希望它能给你一些思路。

相关文章：