1

レポートを表示するセクションを含む Backbone アプリを作成しています。このセクションには、レポート リンクのメニュー、表示されるレポートのタイトル、表示されるレポートの内容の 3 つの部分があります。ユーザーは、関連するモデルのデータを取得するレポート リンクをクリックします。その後、レポートのタイトルと内容がそれに応じて更新されます。ただし、ビュー バインディングがどのように機能するかはわかりません。また、各レポートは、異なるビュー テンプレートを必要とするわずかに異なるデータを返す場合があります。これが私のJSFiddleです（この例のためだけにオーバーライドされたフェッチメソッド）

現在、各レポートのバックボーン モデルと、すべてのレポートのバックボーン コレクションがあります。

App.Models.Report = Backbone.Model.extend();

App.Collections.Reports = Backbone.Collection.extend({
    model: App.Models.Report,
    url: "/reports"
});

メニュー ビューはコレクションに関連付けられており、クリックするApp.State.titleとApp.State.cid、他の 2 つのビューがリッスンする と が設定されます。

App.Views.ReportLink = Backbone.View.extend({
     tagName: 'li',
     className: 'is-clickable',

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

     render: function() {
         this.el.innerHTML = this.model.get('title');
         this.$el.attr('data-CID', this.model.cid); // store the model's cid
     }
});

App.Views.ReportMenu = Backbone.View.extend({
    tagName: 'ul',

    initialize: function() {
        this.listenTo(this.collection, 'reset', this.render)
        this.render();

        this.$el.on('click', 'li', function() {
            App.State.set({
                'title': this.innerHTML,
                'cid': $(this).attr('data-CID') // cid of the clicked view's model
            });
        });
    },

問題はレポートの内容にあります。現在行っていることは、変更をリッスンしApp.State.cid、その cid を使用して指定されたモデルでフェッチを呼び出すことです。このフェッチにより、レポート行のサブコレクションがモデルに取り込まれます。レポート コンテンツ ビューは、サブコレクション データに基づいてその html を設定し、正しいテンプレートをデータに適用することも想定されています。

App.Views.ReportContent = Backbone.View.extend({
    initialize: function(attrs) {
        this.listenTo(this.model, 'change:cid', this.render);
        this.reportsCollection = attrs.reportsCollection;
    },

    render: function() {
        var self = this,
            cid = this.model.get('cid'),
            model = this.reportsCollection.get(cid);

        model.fetch({
            success: function() {
                var html = '';

                model.subCollection.each(function(model) {
                    var template = _.template($('#templateReportA').html()); // want to dynamically set this
                    html += template(model.toJSON());
                });

                self.$el.html(html);
            }
        });
    }
});

1)これは、コレクションを使用したこのタイプの複数ビューの状況に対する正しい種類の実装ですか?

2) 個々のレポートに適用する必要がある正しいテンプレートを渡すにはどうすればよいですか? 現在、レポート A のビュー テンプレートを明示的に渡しています。モデルに保存することも考えられますが、テンプレートはビューに関連付ける必要があります。

4

1 に答える 1