John Resig微型模板引擎渲染异常及innerHTML空值报错求助

Hey there, let's work through your two problems with John Resig's micro-templating system one by one:

1. Template shows <%=id1%> instead of the expected value 123 #

This usually happens when the templating engine isn't properly processing your template string or data. Here are the key things to check:

• Verify your template element's type: Make sure your template is wrapped in a <script> tag with type="text/html" (not text/javascript). Browsers ignore script tags with non-executable types, letting the templating function read the raw content:

  <script type="text/html" id="myTemplate">
    <%=id1%>
  </script>
  

• Check your data object and template variable names: Ensure the key in your data object exactly matches the variable in the template (it's case-sensitive!). If you pass {id: 123} but use <%=id1%> in the template, it won't work. Correct example:

  tmpl("myTemplate", {id1: 123})
  

• Confirm you're calling the tmpl function correctly: The first argument should be the ID of your template element (or the raw template string), and the second should be your data object. Don't skip either!

2. Uncaught TypeError: Cannot read property 'innerHTML' of null #

This error means the templating function is trying to access innerHTML on an element that doesn't exist in the DOM. Here's how to fix it:

• Wait for the DOM to load before running your code: If your script runs before the template element is rendered (e.g., your script is in the <head>), document.getElementById(str) will return null. Fix this by wrapping your code in a DOMContentLoaded listener:

  document.addEventListener('DOMContentLoaded', function() {
    // Your tmpl call goes here
    var output = tmpl("myTemplate", {id1: 123});
    document.getElementById("output").innerHTML = output;
  });
  

• Double-check your template element's ID: Typos happen! If your template has id="testTemplate" but you pass "testtemplate" to tmpl, the function can't find the element. IDs are case-sensitive in JavaScript.
• Ensure the template element exists: Double-check your HTML to make sure you didn't accidentally delete the template tag or miswrite its opening/closing tags.

Full Working Example #

Here's a complete, tested snippet that should work for you:

<!DOCTYPE html>
<html>
<head>
  <title>Micro-Template Test</title>
</head>
<body>
  <script type="text/html" id="testTemplate">
    <%=id1%>
  </script>
  <div id="output"></div>

  <script>
    // John Resig's micro-templating function
    (function(){
      var cache = {};
      this.tmpl = function tmpl(str, data){
        var fn = !/\W/.test(str) ?
          cache[str] = cache[str] ||
            tmpl(document.getElementById(str).innerHTML) :
          new Function("obj",
            "var p=[],print=function(){p.push.apply(p,arguments);};" +
            "with(obj){p.push('" +
            str
              .replace(/[\r\t\n]/g, " ")
              .split("<%").join("\t")
              .replace(/((^|%>)[^\t]*)'/g, "$1\r")
              .replace(/\t=(.*?)%>/g, "',$1,'")
              .split("\t").join("');")
              .split("%>").join("p.push('")
              .split("\r").join("\\'")
          + "');}return p.join('');");
        return data ? fn( data ) : fn;
      };
    })();

    // Run after DOM is fully loaded
    document.addEventListener('DOMContentLoaded', function() {
      var rendered = tmpl("testTemplate", {id1: 123});
      document.getElementById("output").innerHTML = rendered;
    });
  </script>
</body>
</html>

Give these fixes a try, and let me know if you run into any other snags!

内容的提问来源于stack exchange，提问作者user310291