0

I'm using the backbone-on-rails gem with javascript (as opposed to coffeescript) to render views for a model. Everything works fine, but my view code is kind of long so I'd like to refactor things out to use includes/partials.

Heres' my code:

in my views/model_show.js file

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

});

in my templates file I'd like to so something like this in 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> 
<% } %>

where top_section would be a file under templates (like templates/top_section.jst.ejs)

Problem is I keep getting the following errors (firebug output).

SyntaxError: missing ) in parenthetical [Break On This Error]

...2> model found \n\t',(''+ include top_section ).replace(/&/g, '&').replace(/

which causes this error because the template isn't rendered

TypeError: this.template is not a function
[Break On This Error]   

$(this.el).html(this.template({ model: this.model }))

I should mention that I've tried a few different syntaxes like the ones below, but those just throw different errors.

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

Thanks in advance

4

2 回答 2

0

作为现在的权宜之计，我刚刚创建了一个模板哈希并在渲染中枚举它们。不理想，但目前有效。这是代码现在的样子。

视图/model_show.js 文件

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> 
<% } %>

正如我所说 - 不理想，但现在是一种功能性的解决方法。

于 2012-11-15T20:22:14.943 回答
0

在 EJS 中，partial 的正确语法是这样的：

<%= this.partial({url: 'templates/partial.ejs'}) %>
于 2012-11-15T01:18:57.160 回答