0

次のように、コレクション ビューとモデル ビューがあります。

EventListView
|-- EventView

EventListViewEventViews1 対多の関係で多数を表示する必要があります。アンダースコア_.template()機能を使用してビュー テンプレートを作成しています。

ここに私のEventViewテンプレートがあります：

<h1>
    <span class="date"><%= prefix %><%= dateString %></span>
    <span class="title"><%= title %></span>
</h1>
<div class="caption"><%= caption %></div>

私のEventViewレンダリング方法:

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

そして、ここに私のEventListViewテンプレートがあります：

<h1>
    <% if(typeof(title) != "undefined") { print(title) } %>
</h1>
<%= events %>

そして、それは render メソッドです:

// this._EventViews is an array of eventView objects
render: function() {

    var templateData = {
        events: _.reduce(this._EventViews, function(memo, eventView) { return memo + eventView.$el.html(); }, "")
    }
    this.$el.html(this.template(templateData));
    return this;
}

私が抱えている問題は、テンプレートに HTML しか含まれていないことですが、バックボーン ビューがサポートする,および属性eventView.$el.html()を利用する必要があります。tagNameclassNameid

EventView次のように設定したかどうかを検討してください。

return Backbone.View.extend({

    model: EventModel
,   tagName: 'article'
,   className: 'event'  
,   template: _.template(templateText)

,   render: function () {
        this.$el.html(this.template(this.model.attributes));
        return this;
    }
});

挿入したい：

<article class="event" id="someID342">
    <h1>
       <span class="date">01/02/2010</span>
       <span class="title"></span>
       <div class="caption></div>
    </h1>
</article>

しかし、eventView.$el戻ります：

<h1>
   <span class="date">01/02/2010</span>
   <span class="title"></span>
   <div class="caption></div>
</h1>

eventView要素全体を挿入するにはどうすればよいですか? それだけではありませんinnerHTML。

4

3 に答える 3

0

EvenListView のテンプレートでプレースホルダーを予約するだけです

<h1><%- title %></h1>
<div class="js-events"></div>

次に、子ビューをレンダリングして追加します

render: function() {
    this.$el.html(this.template({title: 'Title'}));
    this.$events = this.$('.js-events');
    _.each(this._EventViews, function (eventView) {
        this.$events.append(eventView.render().$el);
    }, this);
    return this;
}
于 2013-05-01T17:42:00.643 に答える
0

多くのオプションがありますが、最も柔軟で持続可能なアプローチは、各サブビューに独自のテンプレートを定義させることだと思います。親ビューは、単に子要素の.elプロパティを追加します。

このアプローチの利点は、テンプレートが一度だけコンパイルされることです。また、子の更新では、親要素と隣接要素を再レンダリングする必要はありません。

ここにJSBinがあります

例：

var ContainerView = Backbone.View.extend({

  tagName: "article",
  className: "event",
  id: "someID342",

  initialize: function(options){
    //the template will now be rendered
    this.childView = new ChildView()

    //the rendered child will now appear within the parent view
    this.el.appendChild( this.childView.el )
  }

})

var ChildView = Backbone.View.extend({

  tagName: "h1",
  dateString:"01/02/2010",
  prefix: "Date: ",
  caption: "What a wonderful date!:",
  title: "I am a title",
  template: _.template([
    '<h1>',
      '<span class="date"><%= prefix %><%= dateString %></span>',
      '<span class="title"><%= title %></span>',
    '</h1>',
    '<div class="caption"><%= caption %></div>'
  ].join("")),

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

  render: function(){
    // because you are only altering innerHTML
    // you do not need to reappend the child in the parent view
    this.el.innerHTML = this.template(this)
  }

})

個人的には、Backbone でテンプレートを使用しないように注意します。アプリのすべてのコンポーネントに Backbone ビューを用意するだけで、後で編集するのがずっと簡単になることがわかりました。テンプレートの共有は、ビューの共有よりもはるかに困難です。もちろん、それはプロジェクトの要件によって異なります。

于 2015-09-12T04:45:39.560 に答える