バックボーンは動的にテンプレートを切り替える

Question

ユーザが選択した日付が過去か未来かに基づいて、またコレクションの変更によって後でデータを取り出す際に、別の日付からデータを取り出すかどうかに基づいて、バックボーンビューのテンプレートを初期設定する必要があります。これはどうすればいいですか？私は私が過去のものかどうかに基づいて正しいセレクター文字列を返す関数にテンプレートを設定できると思ったが、これはうまくいかなかった。

pR.views.ScheduleJobView = Backbone.Marionette.ItemView.extend({ 
    tagName: "tr", 
    // NEED A WAY TO SWITCH THIS TOO 
    template: "#schedule-job-template" 
}); 


pR.views.ScheduleJobsView = Backbone.Marionette.CompositeView.extend({ 
    // DOESN'T WORK 
    template: function() { 
     if (this.isPast) 
      return "#schedule-jobs-past-template"; 
     else 
      return "#schedule-jobs-template"; 
    },  itemView: pR.views.ScheduleJobView, 

    itemView: pR.views.ScheduleJobView, 
    itemViewContainer: "tbody", 

    // Defaults for the model's url 
    baseUrl: "/schedules/day/", 
    baseApiUrl: "/api/schedule/day/", 
    // Empty object to store url parameters 
    urlParameters: {}, 

    initialize: function() { 
     pR.vent.bindTo("change:parameters", this.changeUrl, this); 
     this.model.url = this.baseApiUrl; 
    }, 

    onRender: function() { 
     console.log("Rendering Jobs View"); 
    }, 

    // Change the main model's url 
    changeUrl: function (parameters) { 
     // merge new parameters with old ones 
     this.urlParameters = _.extend(this.urlParameters, parameters); 

     var url = ""; 
     var apiUrl = this.baseApiUrl; 

     _.each(this.urlParameters, function (value, parameter) { 
      // Add each parameter segment to the url 
      url = url + parameter + '/' + value + '/'; 
      apiUrl = apiUrl + parameter + '/' + value + '/'; 
     }); 

     this.model.url = apiUrl; 
     console.log("Updated CurrentDay model url to " + apiUrl); 
     this.model.fetch(); 

     console.log("Navigating to " + url); 
     pR.routers.appRouter.navigate(url); 
    }, 

    // Check if we are in the past 
    isPast: function() { 
     var year = this.urlParameters.year; 
     var month = this.urlParameters.month; 
     var day = this.urlParameters.day; 
     var selectedDate = Date(year, month, day); 

     if (selectedDate < Date()){ 
      return true; 
     } else { 
      return false; 
     } 
    } 
}); 

私も、ここにマリオネットの複合ビューを使用していますので、私は、同様の時間枠に基づいてitemViewのテンプレートを変更する方法が必要に注意してください。私の基本的な戦略が十分に考え出されていない場合、私はこれとは多分接近しています。

Answer 1

this.templateをメソッドに設定し、Marionetteが文字列値を探しています。

おそらく、同じロジックを使用しても、あなたのinitializeメソッドに入れることができます。作品

pR.views.ScheduleJobsView = Backbone.Marionette.CompositeView.extend({ 
    template: null, 
    [ ... ] 
    initialize: function() { 
     if (this.isPast) { 
      this.template = "#schedule-jobs-past-template"; 
     } else { 
      this.template = "#schedule-jobs-template"; 
     } 

Answer 2

getTemplateはこのためで構築されたという関数がありますが、私はドキュメントでそれを見た知っている（それは私がグーグルたものです）

Marionette template switching documentation