0

2 つのテンプレート (ヘッダーと詳細) があります。

  • ヘッダーにはいくつかの詳細が含まれており、詳細セクションのプレースホルダーにも含まれています
  • 詳細には、さらに詳細が含まれています。

私の問題は、アプリケーションを実行すると、ヘッダーのプレースホルダー内の詳細テンプレートが置き換えられないことです。

ビュー 1

 var CalendarView = Backbone.View.extend({
        el: '#header',
        model: todo,
        initialize: function () {
            this.render();
            this.monthView = new MonthView({ el: "#dvDetail", model: this.model });
        },
        render: function () {
            template.render("testHeader.htm", $(this.el), { data: this.model.toJSON() });
        }
    });

ビュー 2

var MonthView = Backbone.View.extend({
    initialize: function () {
        this.model.bind("change", this.render, this);
        this.render();
    },
    render: function () {
        template.render("testDetail.htm", $(this.el), { data: this.model.toJSON() });
    }
});

index.html

<div id="header"></div>

testHeader.htm

<div>This is header </div>
<div id="dvDetail">Sub template should be replace here...</div>

testDetail.htm

<div>This is details template and replaced on #dvDetail html</div>

アプリケーションを実行すると表示されます

This is header
Sub template should be replace here...

私は必要です

This is header
This is details template and replaced on #dvDetail html

目的の出力を得るために、このコードに何が欠けているかを教えてもらえますか? どんな手がかりでも大歓迎です！

4

1 に答える 1

0

アンダースコアまたはロダッシュを使用している場合、これはレンダリング関数に対する私の提案です...

....

   template: _.template("testDetail.htm"), //just a sample , as an idea
   el: '#header',
   model: todo,
   initialize: function () {
       this.render();
       this.monthView = new MonthView({ el: "#dvDetail", model: this.model });
   },
   render: function() {
      this.$el.html(template);  //this will do the trick for you
   }

....

MonthViewについても同じです...

于 2013-06-19T14:54:21.343 に答える