标签: underscore.js-templating

当我尝试呈现以下模板时,我在运行时收到编译错误:

 <script id="tmpl-books" type="text/template">
        <% _.each(items, function(item) { %>
            <ul>
                <li>Title: <%= item.title %></li>
                <li>Author: <%= item.author %></li>
            </ul>
        <% }); %>

    </script>

<script type="text/javascript">
      _.templateSettings = {
                evaluate: /\{\{=(.+?)\}\}/g,
                interpolate: /\{\{(.+?)\}\}/g,
                escape: /\{\{-(.+?)\}\}/g
            };

            var list =
            {
                items:
                [
                    { "title": "Myst: The Book of Atrus", "author": "Rand Miller" },
                    { "title": "The Hobbit", "author": "J.R.R. Tolkien" },
                    { "title": "Stardust", "author": "Neil Gaiman" }]
            };
            $(document).ready(function () {


                var tmplMarkup = $('#tmpl-books').html();
                // ...tell Underscore to render …

在Backbone应用程序中使用下划线时遇到问题.在控制台我有

未捕获的SyntaxError:意外的标记')'

它引用了下划线库:

underscore.js:第1443行

我要做的是按ID选择模板

  var UserList = Backbone.View.extend({
               el: '.page',
               render: function(){
                   var self = this;
                   var users = new Users();
                   users.fetch({
                      success:function(users){
                          console.log(users);
                          var template = _.template($('#user_list_template').html(), users);
                          self.$el.html(template); 
                      } 
                   });
               }
            });

这是我的脚本模板

<script type="text/template" id="user_list_template">

            <table class="table striped">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Age</th>
                </tr>
            </thead>
            <tbody>
                <% _.each(users,function(user)){ %>
                    <tr>
                        <td><%= user.name %></td>
                        <td><%= user.age %></td>
                    </tr>
                <% }); %>
            </tbody>
            </table>

        </script>

正如我发现的那样,问题在于:

   var template = _.template($('#user_list_template').html(), users);

你能帮帮我找一下这个问题吗？

我只是想知道你如何在.aspx视图中使用下划线模板,因为下划线使用的<%=%>标签被.aspx渲染引擎拾取并给我错误.

例如:

<script type="text/template" id="my-template">
  <span class="event" title="<%= description %>">
      <%= title %>
  </span>
</script>

这个模板给了我一个错误,因为.aspx渲染引擎认为我正在尝试将这些东西绑定到Model.

谢谢.

我不得不替换默认的下划线teplating delimiters/Interpolate正则表达式以兼容asp.net webforms.从网站我选择了胡须,如语法

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

试过这个

_.template("{{if(loggedIn)Welcome {{name}}}}",{name:"James",completed:true});

但似乎这不是使用模板系统检查布尔表达式的方式(因为发生错误).但是从文档来看似乎是可能的

以及使用<%...%>执行任意JavaScript代码

• 那么如何使用上面提到的插值执行任意js代码

任何人都知道为什么这不起作用？我试图让_.template使用大括号.

    _.templateSettings = { //change delimiter to <$ $>
          interpolate : /\<\$(.+?)\$\>/g
        };      
    var list = "<$ _.each(people, function(name) { $> <li><$ name $> </li> <$ }); $>";
    var html=_.template(list);
    console.log(html({people : ['moe', 'curly', 'larry']}));

它在))产生以下语法错误错误:

((__t =(. each(people,function(name){))== null？'':_ t)+

以下是Underscore文档所说的内容:

如果ERB样式的分隔符不是您的茶,您可以更改Underscore的模板设置以使用不同的符号来设置插值代码.定义一个插值正则表达式以匹配应该逐字插入的表达式,一个转义正则表达式匹配应该在HTML转义后插入的表达式,以及一个评估正则表达式来匹配应该在不插入结果字符串的情况下进行评估的表达式.您可以定义或省略三者的任意组合.例如,要执行Mustache.js样式模板:

_.templateSettings = {interpolate:/ {({.+？)}}}}}};

var template = _.template("Hello {{name}}!"); 模板({name:"Mustache"}); >"Hello Moustache!"

我想做这样的事情：

<script id="tmpl-books" type="text/template">
  <ul>
    <% for (var i = 0; i < books.length; i++) { %>
      <% var book = books[i]; %>
      <li>
      <em><%= book.title %></em> by <%= book.author %>
      </li>
    <% } %>
  </ul>
</script>

在我的代码中，但是我使用的是JSP，因此必须使用{{}}表示法，但是当我这样做时，{{for（var ...}}不起作用。

<script id="tmpl-books" type="text/template">
      <ul>
        {{ for (var i = 0; i < books.length; i++) { }}
          <% var book = books[i]; %>
          <li>
          <em>{{= book.title }}</em> by {{ book.author }}
          </li>
        {{ } }}
      </ul>
    </script>

我该如何实现？

我有一个视图,其模板如下所示:

<script type="text/template" id="template">
   <div id="<%=cid=>"></div>
   <label><%= label %></label>
   <input type="text" id="search_input" />
   <input type="button" id="search_button" value="Search" />
</script>

我需要使用模型数据渲染此模板,因此我执行以下操作:

render: function () {
   var template = _.template( $("#template").html(), this.model.toJSON());
   this.$el.html( template );
   return this;
}

但不幸的是this.model.toJSON()没有将cid(clientId)传递给我的模板.你可以解释一下如何在我的模板中访问cid,你如何处理这个问题？

我正在尝试使用Underscore.js forEach方法将对象列表加载到模板中:

HTML模板代码:

<script type="text/template" id="element">
    <% _.each(data, function (element) { %>
        <div class="col-xs-12 col-sm-12 col-md-4" id="inner-element">
            <div class="thumbnail">
                <img class="img-responsive" src="../../../img/<%= element.img %>" alt="...">
                <div class="caption">
                    <h3 class="menu-food-name"><%= element.name %></h3>
                    <p class="menu-food-description"><%= element.description %></p>
                    <p class="menu-food-price text-right"><span class="label label-info" role="button"><%= element.price %></span></p>
                </div>
            </div>
        </div>
    <% }); %>
</script>

使用Javascript:

var elementTemplate = _.template($('#element').html(), {data: item});
that.$el.append(elementTemplate);

"item"之前被定义为一个对象数组,其中包含三个元素,其中包含我希望在模板中显示的属性(名称,描述,价格和img)(如console.log(item)中所示):

Object {0: Object, 1: Object, 2: Object}
    0: Object
        description: "grilled portobello and balsamic"
        img: ""
        name: "fungi grigliati"
        price: "7.95" …

我正在使用Backbone和Underscore模板.if()我的代码中有一个JavaScript 条件,如下所示:

<div class='faces'>
    <% if(somevalue === true) { %>
       your face
    <% } else { %>
       my face
    <% } %>
</div>

但是我发现这个语法很尴尬,我真的想使用类似下面的东西,即使它实际上不起作用(用文本替换整个文档):

<div class='faces'>
    <% if(somevalue === true) { 
        document.write("your face");
    } else { 
        document.write("my face");
    }
</div>

我希望在模板中输出字符串的确切位置.对于输出一个简单的变量EJS(和下划线)有一个很好的语法

<%= somevalue %>

其中的=关键部分是document.write()模板中的关键部分.我正在努力实现的目标是什么？JavaScript输出内联吗？

我有一个模态的以下模板

<div class="ui-modal">
  <div class="mask"></div> 
  <div class="ui-modal-container">
    <div class="ui-modal-header">
      <h3><%= modal['title'] %></h3>
    </div>
    <div class="ui-modal-text">
      <p><%= modal['description'] %></p>
    </div>
    <% if ( modal['buttons'] !== 'undefined' ) { %>
      <div class="ui-button-container">
        <a class="ui-button ui-button-pill <%= modal['buttons'][0]['extra_class'] %> " href="<%= modal['buttons'][0]['href'] %>">
          <span class="label">
            <span class="section"><%= modal['buttons'][0]['label'] %></span> 
          </span>
        </a>
      </div>
    <% } %>
  </div>
</div>

这是我试图填充它的数据:

_data = {
 "modal" : {
    "title" : "Your address is:",
    "description" : "Some desc here",
    "buttons" : [
       {'extra_class': 'small left', 'href' : '#register/3', …

在我的 nodeJs 代码中，我从数据库中获取一些记录。我以 JSON 格式获取数据，如下所示：

"Data": [{
    "id": 1,
    "color": "blue",
    "model_name": "ford",
    "year": 2016
}, {
    "id": 2,
    "color": "blue",
    "model_name": "Maruti",
    "year": 2016
}, {
    "id": 3,
    "color": "red",
    "model_name": "Fiat",
    "year": 2016
}, {
    "id": 4,
    "color": "red",
    "model_name": "tata",
    "year": 2016
}]

我想要的是类似于以下 JSON 的内容：

"Data": [{
    "color": "blue",
    car: [{
        "id": 1,
        "color": "blue",
        "model_name": "ford",
        "year": 2016
    }, {
        "id": 2,
        "color": "blue",
        "model_name": "Maruti",
        "year": 2016
    }]
}, {
    "color": "red",
    car: [{ …

基本上我要做的是使用下划线js编译带有一些数据的模板.我的代码如下:

var temp = "<div> Hello <%=names%> </div>";
var html = _.template(temp, {names:'world'};

我期待我的变量html

<div> Hello world </div> 

但由于某些原因,变量名称未定义,而编译和模板永远不会编译.

这是下划线js最基本的东西,根据文档和Web上的大量示例,它应该工作.我究竟做错了什么？

我的 BackboneJS 模板中有以下代码（使用 Underscore 渲染）

<input type="radio" class="isMale" id="isMaleVolunteersNo" 
    <%= model.attributes.isMaleVolunteers == undefined ||         
        model.attributes.isMaleVolunteers == null || 
        model.attributes.isMaleVolunteers == 'N' ? 'checked' : '' 
     %>                 
     name="isMaleVolunteers" value="false" />
<label for="isMaleVolunteersNo" style="display:inline">No</label>

当模型属性 isMaleVolunteers 未定义时，我希望默认选中“否”。

我尝试了以下（带括号）...仍然不起作用；

<input type="radio" class="isMale" id="isMaleVolunteersNo" 
    <%= (model.attributes.isMaleVolunteers == undefined ||
         model.attributes.isMaleVolunteers == null || 
         model.attributes.isMaleVolunteers == 'N') ? 'checked' : '' 
    %> 
    name="isMaleVolunteers" value="false" />
<label for="isMaleVolunteersNo" style="display:inline">No</label>

但上面的代码不起作用。代码有问题吗？