[英]Backbone: Set the parent view's model (different from child model)
I have a Parent
and Child
view. 我有Parent
和Child
观点。 The Child
view extends the Parent
events with: Child
视图将Parent
事件扩展为:
initialize : function() {
// don't overwrite parent's events
this.events = _.extend( {}, ExerciseRowView.prototype.events, this.events);
},
However, the Parent
expects a ParentModel
and the Child
expects a ChildModel
, so when an event is passed to the Parent
, the model is the ChildModel
. 但是, Parent
期望有ParentModel
, Child
期望有ChildModel
,因此,当事件传递给Parent
,模型就是ChildModel
。 How can I set the Parent
model to be different from the Child
model? 如何将Parent
模型设置为与Child
模型不同?
Thanks! 谢谢!
Here's the source, as requested. 这是要求的来源。
ParentView
aka ExerciseRowView
: 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
aka WorkoutExerciseRowView
: 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();
}
});
}
});
Currently (as you can see), I test to see if this.model.constructor == Exercise
inside ExerciseRowView
. 当前(如您所见),我测试以查看this.model.constructor == Exercise
内部进行ExerciseRowView
。 If it is not, I know that I have a WorkoutExercise
, inside which is an Exercise
, so I use this.model.get("exercise")
: 如果不是,我知道我有一个WorkoutExercise
,里面是一个Exercise
,所以我使用this.model.get("exercise")
:
showDetailsPopup : function() {
(new ExerciseDetailsView({model: (this.model.constructor == Exercise ? this.model : this.model.get("exercise"))})).render();
},
This doesn't seem like the cleanest possible solution, though. 不过,这似乎不是最干净的解决方案。
what I could think of is that you define function for each view 我能想到的是您为每个视图定义功能
ParentView 父视图
getExercise: function() {
return this.model;
}
ChildView 儿童观
getExercise: function() {
return this.model.get('exercise');
}
And then change the function 然后改变功能
showDetailsPopup: function() {
(new ExerciseDetailsView({model: this.getExercise()})).render();
}
How about that? 那个怎么样?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.