0

モデルのビューをレンダリングするために、（coffeescriptではなく）javascriptでbackbone-on-railsgemを使用しています。すべて正常に動作しますが、私のビューコードは少し長いので、includes/partialsを使用するためにリファクタリングしたいと思います。

これが私のコードです：

私のviews/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);
  }

});

テンプレートファイルで、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> 
<% } %>

ここで、top_sectionはテンプレートの下のファイルです（templates / top_section.jst.ejsなど）

問題は、次のエラー（firebugの出力）が発生し続けることです。

SyntaxError：括弧内に）がありません[Break On This Error]

...2>モデルが見つかりました\n\ t'、（''+ include top_section）.replace（/＆/ g、'＆'）。replace（/

テンプレートがレンダリングされないため、このエラーが発生します

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

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

以下のようないくつかの異なる構文を試しましたが、それらは異なるエラーをスローするだけです。

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

前もって感謝します

4

2 に答える 2

0

EJSでは、パーシャルの正しい構文は次のとおりです。

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

今のところ一時的なギャップとして、テンプレートのハッシュを作成し、レンダリングでそれらを列挙します。理想的ではありませんが、今のところは機能します。コードは次のようになります。

views/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 に答える