标签: underscore.js-templating

好的,所以我有这个密钥对值数组,我用作我的模型:

var acs = [{'label':'input box'},{'label':'text area'}];

其余代码如下

var Action = Backbone.Model.extend({});
var action = new Action(acs);
var ActionView = Backbone.View.extend({
    tagName:"li",
    template: _.template($('#actions-template').html()),
    events:{
        "click":"makeInput"
    },
    render:function(){
        $(this.el).html(this.template(this.model.toJSON()));
        $(".hero-unit>ul").append(this.el);
        return this;
    },
    makeInput:function(){
        alert("im in");
    }
});
var actionView = new ActionView({model:action});
actionView.render();

问题是关于这个观点.如果这是我想要的视图,我如何遍历我传递的模型

<script type="text/template" id="actions-template">
<% _.each(action, function(acs) { %> 
    <a class="btn"><%= label %></a>
<% }); %>
</script>

我认为我的观点和循环有问题.有线索吗？谢谢!

我无法在我的下划线模板中使用简单的switch语句.它使用名为UserType的变量的值,我通过显示<%= UserType%>来检查它.

代码即将出现:

<% switch(UserType) { %>
    <% case 13: %>
        <button id="schoolButton" value="schools" class="gridChooser k-textbox">Schools</button> 
    <% case 12: %>
        <button id="teacherButton" value="teachers" class="gridChooser k-textbox">Teacher</button> 
    <% case 8: %>
        <button id="classButton" value="classes" class="gridChooser k-textbox">Classes</button> 
        <button id="testButton" value="tests" class="gridChooser k-textbox">Test</button> 
<% } %>

任何帮助非常感谢 - 谢谢.

我看过一些关于骨干js主题的视频.这是直接来自视频的示例.它是从2012年开始的,所以我认为骨干规则/库已经发生了变化,但我无法弄清楚为什么它现在不起作用.在视频中,该人显示它在JS Fiddle中运行,但我无法让它工作.(我在JS Fiddle中包含了必要的库,即下划线,主干和jQuery)

var V = Backbone.View.extend({
  el:'body',
  render: function () {
  	var data = { lat: -27, lon: 153 };
    this.$el.html(_.template('<%= lat %> <%= lon%>', data));
    return this;
  }
});

var v = new V();

v.render();

<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>

我正在使用Underscore模板(基于John Resig的Microtemplate),每当我尝试更换其中的换行符时,我都会遇到奇怪的行为.例如,如果我有这样的文字:

var message = 'Line1\r\n\r\nLine2';

如果我这样做,我可以用br标签正确替换换行符:

$('#example1_no_template').html(message.replace(/\r?\n/g, '<br />'));

但是,如果我尝试用下面的示例代码替换Underscore模板中的换行符,我不会插入任何br标签:

<script id="template1" type="text/html">
    <%= message.replace(/\r?\n/g, '<br />') %>
</script>

<script>
var template1 = _.template($('#template1').html());
$('#example1_template').html(template1({ message: message }));
</script>

奇怪的是,如果我将模板中的正则表达式更改为以下内容,那么我会在各处插入各种br标签:

<script id="template3" type="text/html">
    <%= message.replace(/[\r\n?]/g, '<br /><br />') %>
</script>

所有这些行为都显示在这个小提琴中:http://jsfiddle.net/GHtDY/5/

知道发生了什么事吗？是否可以替换模板中的换行符？

我有这个示例代码使用下划线模板来呈现简单的unescapedHTML.

var template = $(this.el).html(_.template(this.template, {'data': '<script>'}));
$(this.parent).append(template);

但是当它尝试渲染它时,它会导致错误:

未捕获的TypeError:对象[object Object]没有方法'replace'

任何人都可以请教我是什么原因以及如何解决它？由于在下划线文档中:

var template = _.template("<b>&lt;%- value %></b>");
template({value : '&lt;script&gt;'});
=> "<b>&lt;script&gt;</b>"

提前致谢.

我正试图在主干中使用带有下划线的把手样式模板(使用require.js).我有以下内容:

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

在我的模板中,我设置了一个测试:

<div><%= title %> | {{ title }}</div>

我在浏览器中获得以下内容:

Correct title | {{ title }}

因此看起来标准的下划线模板设置正在运行,并且把手样式设置被忽略:

但是,如果我在Chrome中检查控制台,我会得到这个(我觉得它应该是正确的)

_.templateSettings
Object {evaluate: /<%([\s\S]+?)%>/g, interpolate: /\{\{(.+?)\}\}/g, escape: /<%-([\s\S]+?)%>/g}

任何想法为什么这不能正常工作？

我使用Yeoman和backbone.js编写了一个应用程序.在我指定的每个js文件的顶部,'use strict';当我运行我的grunt任务时,jshint不会遇到任何错误.

我可以使用grunt构建我的应用程序而没有问题但是当我尝试运行uglified js时,我收到以下错误:

Uncaught SyntaxError: Strict mode code may not include a with statement

我搜索了代码库,使用with语句的唯一内容是下划线.

我是严格模式的新手,所以我不确定如何解决这个问题.我可以在任何使用underscorejs函数的地方使用严格模式吗？

谢谢.

编辑:

给出下面的代码示例(为简洁起见缩短).我怎么能改变它来解决这个问题.

'use strict';

/*global, Backbone, JST*/

var MyView = Backbone.View.extend({

    template: JST['app/scripts/templates/MyView.ejs'],

    initialize: function()
    {
        this.render();
    },

    render : function()
    {
        this.$el.html(this.template(this.templateVariables()));
        return this;
    },

    templateVariables: function()
    {
        return {var1 : 'Hello', var2 : 'World'};
    }
});

在MyView.ejs中

<p><%= var1 %><%= var2 %>!</p> //<p>Hello World!</p>

编辑2:

在下面使用@mu太简短的答案我发现解决给我悲伤的_.template调用的最好方法是改变我的grunt-JST任务,如下所示:

jst: {
        compile: {
            options:
            {
                templateSettings:
                {
                    variable: 'data'
                }
            }, …

我有一些模板用于我的前端代码,例如:

<div class="row">
    <div class="my-header col-md-1">
        <!-- comments -->
        {{ title }}
    </div>
    <div class="my-container col-md-11">
    {% if (content) { %}
        {{ content }}
    {% } else { %}
       <p>Empty</p> 
    {% } %}
    </div>
</div>

我正在使用grunt-contrib-jst将它们全部存储在一个文件中,然后在另一个构建步骤中将包含在单个JS文件中,并将该文件推送到CDN.这部分工作正常,但我想使用该processContent选项来缩小HTML模板代码,其中包含Undercore模板分隔符(<%...%>替换为{% ... %},<%= ... %>替换为{{ ... }}).

我想使用html-minifier,但它实际上并没有最小化任何东西,显然是因为它试图将模板解析为仅HTML(并且由于模板标记而失败).

是否有任何Node包/功能允许我最小化这种模板？我想在源模板中使用注释和空格,但在生成的构建文件中删除所有不必要的内容.

现在我在我的JST设置上有这个:

processContent: function (content) {
    return content
        .replace(/^[\x20\t]+/mg, '')
        .replace(/[\x20\t]+$/mg, '')
        .replace(/^[\r\n]+/, '')
        .replace(/[\r\n]*$/, '\n');
},
...

但我想尽可能减少一切,这就是为什么我尝试使用html-minifier.

谢谢!

我想做以下事情

var obj = {
  animal: "${animal}"
};

var res = magic(obj, {animal: "cat"});

// res => {animal: "cat"}

magic是一些做脏工作的功能.显然obj,使用多个键,嵌套数组等可能会更复杂.模板变量可以在这样的数组中

var obj = {
  animals: ["cat", "dog", "${animal}", "cow"]
};

它可以在阵列中的任何地方,所以简单地做obj.animals[2] = "bat";是不可行的.

我找到了可以实现我想要的下划线tpl库,但我想知道是否有其他解决方案供将来参考,因为我很难找到下划线tpl.

我实际使用的情况是我有一个config.json文件,我有几个声明,如下所示

{
  "task1": {
    "command": "command-line-program",
    "args": [
      "--input", "{{input}}",
      "--flag1",
      "--output", "{{output}}",
      "--flag2",
    ],
    "options": {
      "cwd": "path-to-working-dir"
    }
  }
}

我用这个解析consig.json JSON.parse(...)我打电话require("child_process").spawn用command,args并options在文件中声明的参数,但是args改变了不少,标志添加,重新排序和东西,所以只做config.task1.args[1] = "<input value>"; …

我的webpack2配置中有一个下划线模板加载器,用babel编译.它在编译时失败,因为with它在代码编译代码中使用.以下是我的加载器中的相关部分webpack.config.js:

我在装载程序下有这个部分:

{
    test: /\.html$/,
    use: [
        {
            loader: 'babel-loader',
            query: {
                presets: [
                    ['es2015', { modules: false }],
                    'es2016',
                    'es2017',
                    'stage-3',
                ],
            },
        },
        {
            loader: 'ejs-loader',
        },
    ],
};

这就是我想要的,我得到的:

ERROR in ./src/table/row.html
Module build failed: SyntaxError: 'with' in strict mode (5:0)

  3 | var __t, __p = '', __e = _.escape, __j = Array.prototype.join;
  4 | function print() { __p += __j.call(arguments, '') }
> 5 | with (obj) {
    | ^
  6 …