当加载页面时,JS似乎没有踢,但是当我手动执行时
var foo = new TrollMann;
foo.render();
似乎事情似乎正常。我的第一个想法是,当一些脚本首次启动时,可能会有一些脚本“丢失”,因为它们中的一些是通过asp.net mvc RenderAction()加载的。但我不确定。
Order.cshtml:
<script type="text/javascript">
$(function () {
window.ApplicationInfo = Backbone.Model.extend({
});
window.Trollmann = Backbone.View.extend({
initialize: function () {
_.bindAll(this, 'render', 'wizardMethod');
},
render: function () {
this.wizardMethod();
return this;
},
wizardMethod: function () {
var myModel = new ApplicationInfo;
var steps = [
{
step_number: 1,
title: "Agfa Ris",
view: new AgfaRis({ model: myModel })
},
{
step_number: 2,
title: "Merida",
view: new Merida({ model: myModel })
}
];
var view = new TilgangTrollmann({
model: myModel,
steps: steps
});
$("#current_step").html(view.render().el);
console.log("asd");
}
});
window.TilgangTrollmann = Backbone.View.extend({
id: 'trollmann',
template: _.template($("#trollmann-template").html()),
events: {
"click #next_step_btn": "nextStep",
"click #prev_step_btn": "prevStep"
},
initialize: function () {
_.bindAll(this, 'render');
this.currentStep = 0;
},
render: function () {
$(this.el).html(this.template);
this.progressIndicator = this.$("#progress_indicator");
this.title = this.$("h2#step_title");
this.currentStepcontainer = this.$(".current_step_container");
this.nextStepBtn = this.$("#next_step_btn");
this.prevStepBtn = this.$("#prev_step_btn");
this.renderCurrentStep();
return this;
},
renderCurrentStep: function () {
var currentStep = this.options.steps[this.currentStep];
if (!this.isFirstStep()) var prevStep = this.options.step[this.currentStep - 1];
var nextStep = this.options.steps[this.currentStep + 1];
this.title.html(currentStep.title);
this.currentView = currentStep.view;
console.log("asd");
this.currentStepcontainer.html(this.currentView.render());
console.log("asd2");
this.renderProgressIndicator();
if (prevStep) {
this.prevStepBtn.html("Forrige: " + prevStep.title).show();
} else {
this.prevStepBtn.hide();
};
if (nextStep) {
this.nextStepBtn.html("Neste: " + nextStep.title);
} else {
this.nextStepBtn.html("Fullfør");
};
},
renderProgressIndicator: function () {
this.progressIndicator.empty();
_.each(this.options.steps, _.bind(function (step) {
var text = "(" + step.step_number + ") " + step.title + ">>> ";
var el = this.make('span', {}, text);
if (step.step_number == this.currentStep + 1) $(el).addClass('active');
this.progressIndicator.append(el);
}, this));
},
nextStep: function () {
if (this.currentView.validate()) {
if (!this.isLastStep()) {
this.currentView.validate();
this.currentStep += 1;
this.renderCurrentStep()
} else {
this.save();
};
};
},
prevStep: function () {
if (!this.isfirstStep()) {
this.currentStep -= 1;
this.renderCurrentStep();
};
},
isFirstStep: function () {
return (this.currentStep == 0);
},
isLastStep: function () {
return (this.currentStep == this.options.steps.length - 1);
}
});
var t = new Trollmann();
});
</script>
模板:
<script type="text/template" id="trollmann-template">
<div id="progress_indicator"></div>
<h2 id="step_title"></h2>
<div class="current_step_container"></div>
<div id="buttons">
<a id="prev_step_btn" class="">Forrige:</a>
<a id="next_step_button" class="">Neste:</a>
</div>
</script>
<div id="current_step"></div>
使用RenderAction(“Index”,“Merida(或AgfaRis)”,new {area =“_Systems”})调用它们;这些是观点。
AgfaRis(index.cshtml):
<script type="text/javascript">
$(function () {
window.AgfaRis = Backbone.View.extend({
template: _.template($("#agfaris-template").html()),
initialize: function () {
_.bindAll(this, "render");
this.render();
},
render: function () {
$(this.el).html(this.template);
}
});
});
</script>
<script type="text/template" id="agfaris-template">
<p>AgfaRis</p>
</script>
梅里达(index.cshtml):
<script type="text/javascript">
$(function () {
window.Merida = Backbone.View.extend({
template: _.template($("#merida-template").html()),
initialize: function () {
_.bindAll(this, "render");
this.render();
},
render: function () {
$(this.el).html(this.template);
}
});
});
</script>
<script type="text/template" id="merida-template">
<p>Merida</p>
</script>
有什么好主意吗?
答案 0 :(得分:4)
嗯......似乎它没有渲染,因为你从未真正调用t.render()
。在大多数Backbone示例中,隐式调用render()
,因为在视图上设置了模型,并且该模型与视图的render()
函数相关联。
更具体地说,在初始化视图时,您通常会调用一个调用,将视图的render()
函数绑定到正在设置/更改的模型,如下所示:
initialize: function() {
this.model.bind('change', this.render, this);
// ... your init stuff here ...
}
每当模型发生变化时,都会触发change
事件,触发您的观看并调用render()
。
但是,在你的情况下,你似乎只使用Backbone的View功能,没有Model的东西...所以最简单的方法是让你的东西渲染你将在Order.cshtml中添加一个显式的渲染调用创建您的Trollmann
,如下所示:
<script type="text/javascript">
$(function () {
window.ApplicationInfo = Backbone.Model.extend({
});
window.Trollmann = Backbone.View.extend({
...
});
window.TilgangTrollmann = Backbone.View.extend({
...
});
var t = new Trollmann();
// Add the following line
t.render();
});
</script>