我在initialize视图中引用backbone.marionette函数中的div。我遇到的问题是，当我离开该视图并返回时，该div的引用为 null 。例如：
var div = $('#video_player');
console.log(div);
将在页面第一次加载时返回正确的div，但如果我导航到另一个视图并返回，则引用为 null 。
我正在与其他人的代码合作，因为我的任务是维护和更新创业公司网站。
这是他们的javascript
define(['marionette',
'tpl!templates/views/plan.html',
'localizer',
'common/ServerErrors',
'jquery',
'models/SessionModel',
'common/ServerApiURLs',
'utilities/Events'],
function (
Marionette,
tpl,
localizer,
ServerErrors,
$,
session,
ServerApiURLs,
Events) {
'use strict';
//var player;
var PlanView = Marionette.ItemView.extend({
className: 'membershipItem',
tagName: 'li',
template: function(data) {
return tpl({resources: localizer.resources, plan: data.plan, isLogged: data.logged_in });
},
serializeData: function(){
return { plan: this.model.toJSON(), logged_in: session.get('logged_in') };
},
events : {
'click .signUp' : 'singUp',
'click .getStarted' : 'getStarted'
},
singUp : function(e) {
e.preventDefault();
location.href='#sign-up';
},
initialize : function(){
this.user = session.get('userProfile');
console.log("initialize is called");
if(session.get('logged_in') && this.user && this.user.get('plan')){
this.userPlan = this.user.get('plan').name;
}
this.player = new window.YT.Player('video_player',{
events: {
'onStateChange': this.onPlayerStateChange,
'onReady' : this.onPlayerReady
}
});
var div = $('#video_player');
console.log(div);
console.log(this.player);
//that.startscrollstuff();
//$(window).scroll(function() {
// var scrollPosition = $(document).scrollTop();
// var scrollBottom = $(window).height() + scrollPosition;
// var div = $('#video_player');
// var elemTop = div.offset().top;
// var elemBottom = div.height() + elemTop;
// //console.log("elemBottom " + elemBottom + " scrollBottom " + scrollBottom);
// if ((elemBottom <= scrollBottom) && (elemTop >= scrollPosition))
// {
// this.player.playVideo();
// }else{
// this.player.stopVideo();
// }
//});
},
onPlayerReady: function(event){
console.log("ready");
//event.target.playVideo();
//event.target.mute();
},
onPlayerStateChange: function(event) {
//console.log("state changed");
//console.log(player);
//player.stopVideo();
},
getStarted : function(e) {
e.preventDefault();
if(!this.soldPlan){
var that = this;
var token = session.get('token');
var data = {
planId: that.model.get('id')
};
Events.trigger('show_loading');
$.ajax({
url: ServerApiURLs.payment,
contentType: 'application/json',
dataType: 'json',
type: 'POST',
headers: {token: token},
data: JSON.stringify(data),
success: function (res) {
if (res.success) {
that.payment = res.payment;
that.fillForm();
Events.trigger('hide_loading');
} else {
ServerErrors.showServerError(res.errors);
Events.trigger('hide_loading');
}
},
error: function (mod, res) {
}
})
}
},
fillForm : function(){
$('#paymentForm').attr({'method' : this.payment.form.method, 'action' : this.payment.form.action});
$('#login').val(this.payment.hidden_fields.x_login);
$('#amount').val(this.payment.hidden_fields.x_amount);
$('#description').val(this.payment.hidden_fields.x_description);
$('#invoice_num').val(this.payment.hidden_fields.x_invoice_num);
$('#sequence').val(this.payment.hidden_fields.x_fp_sequence);
$('#timestamp').val(this.payment.hidden_fields.x_fp_timestamp);
$('#hash').val(this.payment.hidden_fields.x_fp_hash);
$('#test_request').val(this.payment.hidden_fields.x_test_request);
$('#show_form').val(this.payment.hidden_fields.x_show_form);
$('#relay_responce').val(this.payment.hidden_fields.x_relay_response);
$('#relay_always').val(this.payment.hidden_fields.x_relay_always);
$('#relay_url').val(this.payment.hidden_fields.x_relay_url);
$('#token').val(this.payment.hidden_fields.token);
$('#paymentForm').submit();
},
checkSelectedPlan : function(){
if(this.user.get('plan')){
if(this.userPlan == 'Basic'){
if(this.model.get('name') == 'Basic'){
this.soldPlan = true;
return 'SoldPlan';
}
}
if(this.user.get('plan').name == 'Advanced'){
if(this.model.get('name') == 'Basic' || this.model.get('name') == 'Advanced'){
this.soldPlan = true;
return 'SoldPlan';
}
}
if(this.user.get('plan').name == 'Select'){
if(this.model.get('name') == 'Basic' || this.model.get('name') == 'Advanced' || this.model.get('name') == 'Select'){
this.soldPlan = true;
return 'SoldPlan';
}
}
if(this.user.get('plan').name == 'Premium'){
if(this.model.get('name') == 'Basic' || this.model.get('name') == 'Advanced' || this.model.get('name') == 'Select'
|| this.userPlan == 'Premium'){
this.soldPlan = true;
return 'SoldPlan';
}
}
if(this.user.get('plan').name == 'Elite'){
if(this.model.get('name') == 'Basic' || this.model.get('name') == 'Advanced' || this.model.get('name') == 'Select'
|| this.model.get('name') == 'Premium' || this.model.get('name') == 'Elite'){
this.soldPlan = true;
return 'SoldPlan';
}
}
}
},
onBeforeRender: function() {
console.log("on before render is called");
if (session.get('logged_in')) {
var sheme = this.checkSelectedPlan();
}
if (sheme) {
this.$el.addClass(sheme + '-membershipColorSheme');
}
else {
this.$el.addClass(this.model.get('name') + '-membershipColorSheme');
}
var price = this.model.get('price');
var storage = this.model.get('storage');
this.model.set('storageForView', storage + 'Gb');
this.model.set('priceForView', '$' + price);
return this;
},
onShow : function(){
console.log("on show is called");
}
});
return PlanView;
}）;
这是他们的html
<div id="main">
<div class="topperBlock" style="">
<div class="headline">
<h1>Create <span class="bolder selectLetters"> T</span>he <span class="bolder selectLetters">S</span>tory <span class="bolder selectLetters">O</span>f <span class="bolder selectLetters">Life</span></h1>
<img src="assets/img/topperBockImg.png">
<div class="buttonsBlock">
<a href="#" class="links singUp">Sign Up Now</a>
</div>
</div>
<div class="arrowDown">
<a href="#content_video"><img src="assets/img/arrowDown.png"></a>
</div>
</div>
<div class="inner">
<div id="content_video">
<center>
<div id="video_spot">
<iframe width="700" height="400" frameBorder="0" style="padding-top: 45px" id="video_player"
src="http://www.youtube.com/embed/wBhdYHZaKWo?enablejsapi=1">
</iframe>
</div>
</center>
</div>
</div>
<div class="inner">
<div id="content">
<div class="membershipTitle">
<h2>{{resources.plans.header}}</h2>
<p>{{resources.plans.text.one_time_only_fee_to_create_your_forever_legacy}}</p>
<!--<div id="promoCode">-->
<!--<input id="inputPromo" placeholder="If you have a promo code, please enter it here">-->
<!--<button type="submit" id="sendPromo">></button>-->
<!--</div>-->
</div>
<center>
<ul class="membershipPlans" id="plans">
</ul>
</center>
</div>
<form id="paymentForm" method="post" action="">
<input id="login" name="x_login" type="hidden" value="">
<input id="amount" name="x_amount" type="hidden" value="">
<input id="description" name="x_description" type="hidden" value="">
<input id="invoice_num" name="x_invoice_num" type="hidden" value="">
<input id="sequence" name="x_fp_sequence" type="hidden" value="">
<input id="timestamp" name="x_fp_timestamp" type="hidden" value="">
<input id="hash" name="x_fp_hash" type="hidden" value="">
<input id="test_request" name="x_test_request"type="hidden" value="">
<input id="show_form" name="x_show_form" type="hidden" value="">
<input id="relay_responce" name="x_relay_response" type="hidden" value="">
<input id="relay_always" name="x_relay_always" type="hidden" value="">
<input id="relay_url" name="x_relay_url" type="hidden" value="">
<input type='hidden' name='x_cancel_url'
value='http://testing.demohoster.com/tsolife/payment.php' />
<input type='hidden' name='x_cancel_url_text' value='Cancel' />
<input id="token" name="token" type="hidden" value="">
</form>
</div>
使用backbone.marionette的路由系统完成路由。