2

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

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 构建了我的应用程序。我使用了初始化和主干生成器。

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

4

3 回答 3

2

如果您使用 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 做类似的事情。

于 2012-09-24T18:01:08.947 回答
0

撇开约定不谈，看起来问题只是您的 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 以文本形式为您获取模板，并在创建下划线模板之前将其作为变量抛出。

于 2014-01-26T00:39:11.447 回答
0

请尝试使用yeoman 1.0beta的最新骨干生成器。我们对其进行了很多改进，包括预编译 ejs 模板。您不必担心模板，yeoman 会为您预编译和加载它。

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

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

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

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

});
于 2013-04-07T18:38:35.490 回答