Question

我在视图中使用.ejs模板。但由于某种原因，视图不会加载给定的模板。它返回undefined。这是代码：

sandplate2.applicationView = Backbone.View.extend({
    el: 'div',

  template: _.template($("appl.ejs").html()),

  initialize: function(){
    console.log("Application view initialize");

    _.bindAll(this, "render");

    this.render();
  },

  render: function(){
    console.log("Application view rendering");
    this.$el.html(this.template());
    return this;
  }
});

我是否必须配置其他内容才能加载模板？

我使用Yeoman构建了我的应用程序。我使用了init和骨干生成器。

仅供参考 - 我尝试加载的模板使用脚本元素加载到index.html中。

Answer 1

如果您使用Yeoman构建它，请查看app.js以查看您是否使用Backbone.LayoutManager。您可能必须更改其中的配置才能使EJS正常工作。默认情况下，我认为应该期待Underscore个模板。

我正在使用Handlebars，我将app.js更新为：

Backbone.LayoutManager.configure({
  manage: true,

  paths: {
    layout: "templates/layouts/",
    template: "templates/"
  },

  fetch: function(path) {
    path = path + ".html";

    if (!JST[path]) {
      $.ajax({ url: app.root + path, async: false }).then(function(contents) {
        JST[path] = Handlebars.compile(contents);
      });
    }

    return JST[path];
  }
});

我还在模块的define（）调用中添加了Handlebars，传入'Handlebars'作为参考。您可能需要为EJS做类似的事情。

Answer 2

请尝试使用最新的backbone genearator和yeoman 1.0beta。我们对其进行了很多改进，包括Precompiling ejs templates。你不想担心模板，yeoman会为你预编译并加载它。

下面提供了输入视图的示例生成代码。

Todo.Views.InputView = Backbone.View.extend({

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

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

});

Answer 3

除了惯例之外，看起来问题只是你的jQuery查找。

_.template($("appl.ejs")...

$('appl.ejs')不是有效的DOM选择器，除非您在index.html中有这样的元素

<appl class="ejs"></appl>

如果您尝试使用jQuery定位模板，请为其提供ID或jQuery可以找到的内容：

<script type="text/template" id="appl">
    <div></div><!-- template html here -->
</script>

    // later...
    $('#appl').html()
    // will get your template html

然而，正如其他人所提到的，在yeoman和require.js工作流程中，您可以要求require.js以文本形式获取模板，并在创建下划线模板之前将其作为变量抛出。

模板没有在Backbone.js应用程序中加载 - 使用Yeoman构建

3 个答案: