Question

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

我找到的逃脱字符是＆amp;＆amp;，＆gt;，＆lt;。

我找了另一个类似的问题，却找不到任何问题。

问题出在哪里？

我的模板是：

<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);

您会注意到此控制台使用已过滤的＆＃34;模型＆＃34;记录div。其中{id:1}。

Answer 3

试试这个：

Javascript：

   type CvJdRelationInfo struct {
     JdId            string    `bson:"jdId" json:"jdId"`
     CvId            string    `bson:"cvId" json:"cvId"`
     Status          int16     `bson:"status" json"status"`
     AcceptTimestamp int64     `bson:"acceptTimeStamp" json:"acceptTimeStamp"`
   }

HTML：

_.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);

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

请告诉我这是否适合您：）

祝你好运！

UnderscoreJS模板转义JS运算符

3 个答案: