browserify中的空下划线模板答案

【问题标题】：Empty underscore template in browserifybrowserify中的空下划线模板
【发布时间】：2015-08-05 18:55:11
【问题描述】：

我使用 Browserify 来加载主干视图。该视图正在渲染一些带有下划线的 html 模板。当我从 html 模板脚本加载模板标记时，“tmpl2”方法正在生成一个空字符串。 browserify 和 underscore 之间是否存在任何问题，或者为什么它呈现一个空字符串？（我用的是最新版的browserify、underscore、backbone、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>

【问题讨论】：

您确定在您编译模板时加载了 DOM？
是的，dom 已经加载了，加载和渲染这个主干视图的脚本在 jquery 就绪方法“$(function(){})”中。
是实例化视图的代码，还是声明它？我怀疑是后者，这就是问题所在。
是的，你完全正确，现在我看到我已经在 main.js 中放置了 require 方法，用于加载此视图，在 jquery 就绪函数之外。在 ready 方法中调用 require('view.js') 时，它将正确解析模板，感谢正确提示:)
欢迎您，很高兴为您提供帮助。一般来说，您可以指出您的问题有一个solution，但勾选答案左侧的复选标记。

标签： javascript jquery backbone.js underscore.js browserify

【解决方案1】：

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

当您声明主干视图时，为其原型赋值的语句会立即执行。

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

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

但是，这样做的缺点是要为您的视图的每个实例编译模板，在您的情况下可能更有意义的是单独存储您的模板并需要它并使用它。

【讨论】：