javascript - 如何在 plunker 中维护我的下划线模板设置？

Question

我已经使用 plunker 大约一个月了。我正在制作一个 backbonejs plunker，我看到 Underscore 丢失了我的模板设置并退回到 ERB 样式模板，而我想要 Mustache 样式语法 {{ myData }} .我在我的 app.js 中设置值(我总是在我的应用程序中这样做)但出于某种原因，它不断变回 ERB <%=boo%> .有人可以帮我弄清楚我的模板设置吗？ plunker using underscore templating您需要在 chrome 开发工具或 firebug 或 equiv 中查看控制台输出...

感谢您提供任何提示或技巧。我试过了

_.templateSettings = { 
   interpolate: /\{\{(.+?)\}\}/g,
   evaluate: /\[\[(.+?)\]\]/g
 }; 

当我 console.log(_.templateSettings)在设置后立即在我的 app.js 文件中，一切似乎都是正确的，但我的模板没有被处理。我可以进入 View 并运行相同的 console.log() 并且我看到它已切换回 ERB 样式。有谁知道如何使我的设置保持不变？也许这是一个 plunker 问题，因为我多次使用这种方法都没有问题。

这通常可以解决问题。我什至尝试... 窗口._ = _;

感谢任何帮助、提示、技巧等...

Answer 1

您只是遇到了执行顺序问题。你的 app.js 是这样说的:

var app = {
  init: function () {
    _.templateSettings = {
      interpolate: /\{\{(.+?)\}\}/g,
      evaluate: /\[\[(.+?)\]\]/g
    };
    window._ = _;
  },
  //...

因此在有人调用 app.init() 之前，您的模板设置不会被应用。如果我们查看您在 main.js 中的一个 View ，我们将看到如下内容:

Zurg.Views.AltContent = app.View.extend({
  #...
  template: _.template([...].join('')),
  #...

所以你的 _.template 调用发生在 main.js 被加载和解析的时候，但是 app.init() 没有被调用直到后来。

您需要做的就是按照以下顺序安排事情发生:

1. 加载库(jQuery、Underscore、Backbone 等)
2. 调整 _.templateSettings 以使用您的分隔符。
3. 载入您的观点。

如果将 _.templateSettings 移动到 app.init 之外:

_.templateSettings = {
    interpolate: /\{\{(.+?)\}\}/g,
    evaluate: /\[\[(.+?)\]\]/g
};

var app = {
  init: function () {
    // Whatever you really need to initialize things goes here...
  },
  //...

那么一切都会顺利的。顺便说一句，你的 window._ = _; 技巧没有做任何有用的事情，所以我把它拿出来了。您还应该在 _.templateSettings 中包含一个 escape 正则表达式，您可能不需要它，但完整性很好。