下划线中的外部模板

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (21)

用下划线模版。可以附加一个外部文件为模板?

在主干视图中,我有:

 textTemplate: _.template( $('#practice-text-template').html() ),

 initialize: function(){                                            
  this.words = new WordList;            
  this.index = 0;
  this.render();
 },

在我的html中是:

<script id="practice-text-template" type="text/template">
   <h3>something code</h3>
</script>

我需要外部模板,我试着:

<script id="practice-text-template" type="text/template" src="templates/tmp.js">

textTemplate: _.template( $('#practice-text-template').load('templates/tmp.js') ),

$('#practice-text-template').load('templates/tmp.js', function(data){ this.textTemplate = _.template( data ) })

但没成功。

提问于
用户回答回答于

在模板中包含一个JS文件的简单性。因此,可能创建一个名为view的文件。_js,它将模板作为变量包括:

app.templates.view = " \
    <h3>something code</h3> \
";

然后,它就像一个普通的脚本文件一样简单,然后在你的视图中使用它:

template: _.template(app.templates.view)

更进一步,我实际上使用了coffeescript,所以我的代码实际上看起来更像这样并且避免了换行符字符:

app.templates.view = '''
    <h3>something code</h3>
'''

使用这种方法可以避免在没有必要的地方引入requ.js。

用户回答回答于

以下是一个简单的解决方案:

var rendered_html = render('mytemplate', {});

function render(tmpl_name, tmpl_data) {
    if ( !render.tmpl_cache ) { 
        render.tmpl_cache = {};
    }

    if ( ! render.tmpl_cache[tmpl_name] ) {
        var tmpl_dir = '/static/templates';
        var tmpl_url = tmpl_dir + '/' + tmpl_name + '.html';

        var tmpl_string;
        $.ajax({
            url: tmpl_url,
            method: 'GET',
            dataType: 'html', //** Must add 
            async: false,
            success: function(data) {
                tmpl_string = data;
            }
        });

        render.tmpl_cache[tmpl_name] = _.template(tmpl_string);
    }

    return render.tmpl_cache[tmpl_name](tmpl_data);
}

在这里使用“异步:false”并不是一种糟糕的方式,因为在任何情况下,必须等待模板加载。

所以,“呈现”功能

  1. 允许将每个模板存储在静态dir中的单独html文件中。
  2. 很轻
  3. 编译和缓存模板
  4. 抽象模板加载逻辑。例如,将来可以使用预加载和预编译模板。
  5. 易用

如果模板没有显示在本地应用程序,你看HIERARCHY_REQUEST_ERROR: DOM Exception 3

基本上,必须添加

dataType: 'html'

到$.ajax请求。

扫码关注云+社区