主幹：設置父視圖的模型（與子模型不同）

Question

我有一個Parent和Child視圖。所述Child視圖延伸Parent事件與：

initialize : function() { 
     // don't overwrite parent's events 
     this.events = _.extend({}, ExerciseRowView.prototype.events, this.events); 
    }, 

然而，Parent期望一個ParentModel和Child期望一個ChildModel，所以當一個事件被傳遞到Parent，該模型是ChildModel。如何設置Parent型號與Child型號不同？

謝謝！

這是根據要求的來源。

ParentView又名ExerciseRowView：

var ExerciseRowView = Parse.View.extend({ 
     tagName : 'div', 
     className : 'exerciseWrapper', 

     template : _.template(exerciseElement), 

     events : { 
      'click .icon_delete' : 'confirmDelete', 
      'click .name' : 'showDetailsPopup' 
     }, 

     confirmDelete : function() { 
      var that = this; 

      if(confirm("Are you sure you want to delete this exercise?")) { 
       this.destroy({ 
        success: function(exercise) { 
         // log the action 
         Log.add(Log.ACTION_EXERCISE_DELETED, exercise.get("name")); 

         that.$el.fadeOut(); 
        } 
       }); 
      } 
     }, 

     showDetailsPopup : function() { 
      (new ExerciseDetailsView({model: (this.model.constructor == Exercise ? this.model : this.model.get("exercise"))})).render(); 
     }, 

     // accept data as a parameter for workoutexercises 
     render : function(data) { 
      _.defaults(data, { 
       exercise: this.model, 
       Muscle : Muscle, 
       Equipment : Equipment, 
       Exercise : Exercise, 
       Break : Break, 
       HTMLHelper : HTMLHelper, 
       User : User 
      }); 
      $(this.el).html(this.template(data)); 
      return this; 
     } 
    }); 

ChildView又名WorkoutExerciseRowView：

var WorkoutExerciseRowView = ExerciseRowView.extend({  

     events : { 
      "click .icon_randomize" : "changeToRandomExercise" 
     }, 

     initialize : function() { 
      // don't overwrite parent's events 
      this.events = _.extend({}, ExerciseRowView.prototype.events, this.events); 
     }, 

     render: function() { 
      // override the template data with workout exercise template data 
      return ExerciseRowView.prototype.render.call(this, { 
       workoutExercise : this.model, 
       exercise : this.model.get("exercise"), 
       workoutSection : this.model.get("section"), 
       isEditable : true, 
       number : this.options.number, 
       WorkoutExercise : WorkoutExercise, 
       WorkoutSection : WorkoutSection 
      }); 
     }, 

     changeToRandomExercise : function(e) { 
      // pick a random alternative exercise 
      var newExerciseId; 
      do { 
       newExerciseId = _.keys(this.model.get("alternativeExercises"))[ Math.floor(Math.random() * _.keys(this.model.get("alternativeExercises")).length) ]; 
      } while(newExerciseId == this.model.get("exercise").id); 

      // grab it 
      var that = this; 
      (new Parse.Query(Exercise)).get(newExerciseId, { 
       success: function(exercise) { 
        // update the workout exercise 
        that.model.set("exercise", exercise); 

        // render it 
        that.render(); 
       } 
      }); 
     } 
    }); 

目前（因爲你可以看到），我測試，看看裏面this.model.constructor == ExerciseExerciseRowView。如果不是，我知道我有一個WorkoutExercise，裏面這是一個Exercise，所以我用this.model.get("exercise")：

showDetailsPopup : function() { 
      (new ExerciseDetailsView({model: (this.model.constructor == Exercise ? this.model : this.model.get("exercise"))})).render(); 
     }, 

這似乎不是最乾淨的解決方案，但。

Answer 1

什麼我能想到的就是你定義函數爲每個視圖

ParentView

getExercise: function() { 
    return this.model; 
} 

ChildView

getExercise: function() { 
    return this.model.get('exercise'); 
} 

，然後改變其功能

showDetailsPopup: function() { 
    (new ExerciseDetailsView({model: this.getExercise()})).render(); 
} 

那怎麼樣？