Backbone.js 如何在Rails3主干ejs.jst文件中使用includes/partials

我正在使用rails主干gem和javascript（与coffeescript相反）来呈现模型的视图。一切都很好，但是我的视图代码有点长，所以我想重构一些东西来使用include/partials

这是我的密码：

在我的视图/model_show.js文件中

AppName.Views.ModelNameShow = Backbone.View.extend({

  template: JST['main'],

  initialize: function() {
    this.render();
  },

  render: function() {
    this.model.fetch({async:false});
    $(this.el).html(this.template({ model: this.model }))
    $('#main_content').html(this.el);
  }

});

AppName.Views.ModelNameShow = Backbone.View.extend({

  templates: {
    top_section: JST['top_section'],
    middle_section: JST['middle_section'],
    bottom_section: JST['bottom_section']
  },

  initialize: function() {
    this.render();
  },

  render: function() {
    this.model.fetch({async:false});
    var zuper = this;
    $.each(this.templates, function(key, value) {
      //iterate over each template and set the html for the div with id=key with template
      //For example $('#top_section).html(JST template for top_section)
      $('#' + key).html(zuper.templates[key]({ model: zuper.model }))
    })
  }

});

在我的模板文件中，我想在templates/main.jst.ejs中这样做

<% if(this.model) { %>
    <h2> model found</h2> 
    <%- include top_section %>
    <%- include middle_section %>
    <%- include bottom_section %>
<% } else { %> 
    <h3>Claim not found <a href='#'>Back</a></h3> 
<% } %>

我应该提到的是，我已经尝试了一些不同的语法，比如下面的那些，但是这些只是抛出了不同的错误

<%= include top_section %>
<%- include(top_section) %>

---

提前感谢

在EJS中，分部的正确语法如下：

<%= this.partial({url: 'templates/partial.ejs'}) %>

---

作为权宜之计，现在我刚刚创建了一个模板散列，并在渲染中对其进行枚举。不太理想，但目前还有效。下面是代码现在的样子

视图/model_show.js文件

AppName.Views.ModelNameShow = Backbone.View.extend({

  template: JST['main'],

  initialize: function() {
    this.render();
  },

  render: function() {
    this.model.fetch({async:false});
    $(this.el).html(this.template({ model: this.model }))
    $('#main_content').html(this.el);
  }

});

AppName.Views.ModelNameShow = Backbone.View.extend({

  templates: {
    top_section: JST['top_section'],
    middle_section: JST['middle_section'],
    bottom_section: JST['bottom_section']
  },

  initialize: function() {
    this.render();
  },

  render: function() {
    this.model.fetch({async:false});
    var zuper = this;
    $.each(this.templates, function(key, value) {
      //iterate over each template and set the html for the div with id=key with template
      //For example $('#top_section).html(JST template for top_section)
      $('#' + key).html(zuper.templates[key]({ model: zuper.model }))
    })
  }

});

模板文件现在看起来像这样

<% if(this.model) { %>
    <h2> model found</h2> 
    <div id="top_section"/>
    <div id="middle_section"/>
    <div id="include bottom_section"/>
<% } else { %> 
    <h3>Model not found <a href='#'>Back</a></h3> 
<% } %>

模型发现
找不到模型

---

正如我所说的，这并不理想，但目前是一个功能性的解决方案。

谢谢你的回复，安德鲁，但它仍然不适合我。我认为是.jst.ejs链中的某个东西导致了事情的破裂，并且对这两者都是新的，我只是没有看到它。