Question

我使用Browserify加载Backbone View。该视图使用下划线呈现一些html模板。当我从html模板脚本加载模板标记时，“tmpl2”方法生成一个空字符串。 browserify和下划线之间是否存在任何问题，或者为什么渲染空字符串？（我使用最新版本的browserify，下划线，骨干，jquery）

View.js：

var $ = require('jquery');
var Backbone = require('backbone');
var _ = require('underscore');
Backbone.$ = $;

var View = Backbone.View.extend({

    tmpl1: _.template("<p>hello: <%= name %></p>"),     //HTML hardcoded
    tmpl2: _.template( $.trim( $('#tmpl').html() ) ),     //HTML from template

    render: function(){
        console.log( $.trim( $('#tmpl').html() ) );   //<p>hello: <%= name %></p> <-- OK
        console.log( this.tmpl1({name : 'moe'}) );      //<p>hello: moe</p>         <-- OK
        console.log( this.tmpl2({name : 'moe'}) );      //(Emptystring)             <-- WTF ???
    }

});

module.exports = View;

的index.html：

<script type="text/template" id="tmpl">
    <p>hello: <%= name %></p>
</script>

Answer 1

您的问题很可能是在您编译模板时尚未加载DOM。虽然你的渲染函数可能直到稍后才被调用，这就是为什么你能够记录模板的原因。

当您声明骨干视图时，会立即执行为其分配值 prototype 的语句。

例如，在您的情况下，立即执行以下行

tmpl2: _.template( $.trim( $('#tmpl').html() ) ),     //HTML from template

您可以在初始化函数中编译模板（假设在DOM加载后调用该模板）。

例如

initialize: function () {
  this.tmpl1 = _.template("<p>hello: <%= name %></p>");   //HTML hardcoded
  this.tmpl2 = _.template( $.trim( $('#tmpl').html() ) );
}

然而，这样做的缺点是为视图的每个实例编译模板，在您的情况下更有意义的是分别存储模板并需要并使用它。 / p>

在browserify中清空下划线模板

1 个答案: