UnderscoreJS 模板转义 JS 运算符

Question

我遇到一个问题，我的 UnderscoreJS 模板中的 JavaScript 运算符被转义，因此无法使用。

我发现的转义字符是&&、>、<。

我已经在寻找另一个类似的问题，但找不到。

问题出在哪里？

我的模板是：

<div class="list-feedbacks-container" style="display: block;">
    {{ _.each(collection, function(model) {

        if (model.id > 0)
        {
            // This can't be execute, the line above raised an error
        }
    }}
</div>

Firebug中出现的错误是：

SyntaxError: missing ) after condition
    if (model.id &gt; 0)                        {                            //

这是我的观点：

Backbone.View.extend({
    el: '.list-container',

    events: {
        ...
    },

    /**
     *  Initiliaze the view variables and listeners of the view
     */
    initialize: function(){

        // Change delimiter from <% %> to {{ }}
            _.templateSettings = {
            interpolate: /\{\{\=(.+?)\}\}/g,
            evaluate: /\{\{(.+?)\}\}/g
        };

        this.collection = new myCollection();

        this.render();
    }
});

谢谢

Answer 1

不要将模板存储在 <div> 或任何其他 HTML 中。浏览器认为 HTML 的任何内容都将被更正为有效 HTML 并且模板很少会有效 HTML。结果一团糟。

相反，将您的模板存储在一个容器中，容器中的内容将被单独放置。通常您使用具有适当内容类型的 <script>：

<script id="whatever" type="text/x-underscore-template">
    <div class="list-feedbacks-container" style="display: block;">
        {{ _.each(collection, function(model) {
            ...
        }}
    </div>
</script>

那你可以

var t = _.template($('#whatever').html());

让您的模板功能不受干扰。

Answer 2

您的模板应该位于 mu is too short 提到的脚本中。此外，您的评估正则表达式不正确，因为 . 不匹配换行符。您可以尝试 (?:.|\n) 代替。最后，你应该用方括号结束你的函数体，用圆括号结束你的函数调用列表。

工作示例：

HTML:

<script id="a" type="mytype">
    <div class="list-feedbacks-container" style="display: block;">
    {{ _.each(collection, function(model) {

        if (model.id > 0)
        {
            print(JSON.stringify(model));
        }
   })}}
   </div>
</script>

JavaScript+Underscore.js:

_.templateSettings = {
  interpolate: /\{\{\=(.+?)\}\}/g,
  evaluate: /\{\{((?:.|\n)+?)\}\}/g,
  //evaluate: /\{\{(.+?)\}\}/g, //<-your code
};

var a = document.getElementById('a');
var templateString = a.innerHTML;

var compiled = _.template(templateString);
var data = compiled({collection: [{id:1},{id:0}]});
console.log(data);

您会注意到此控制台记录了 div，其中包含已过滤的 "model" {id:1}。

Answer 3

试试这个：

Javascript:

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

var view = Backbone.View.extend({
    className: 'list-container',
    template: _.template($('#my-template').html()),
    render: function() {
      this.$el.html(this.template(this));
      return this;
    },
});


var collection = new Backbone.Collection();
collection.add([
    {id: 10, email: 'foobar10@demo.com'},
    {id: 11, email: 'foobar11@demo.com'}
]);

var myView = new view({collection: collection});
$('#container').html(myView.render().el);

Html:

<script type="text/template" id="my-template">
    {{ _.each(collection.models, function (model) { }}
         {{ if (model.get('id') === 10) { }}
            <span class="blue">{{= model.get('id')  }}, email: {{- model.get('email')  }}</span>
         {{ } else { }}
            <span class="green">{{= model.get('id')  }}, email: {{- model.get('email')  }}</span>
         {{ } }}
    {{ }) }} 
</script>

<div id="container"></div>

您可以在此处查看一个小演示：http://jsfiddle.net/levieraf/9h85q302/

让我知道这是否适合你:)

祝你好运！

UnderscoreJS 模板转义 JS 运算符

UnderscoreJS template escapes JS operators

javascript

underscore.js

underscore.js-templating