Lesson overview simplification moving template to separate file.

This commit is contained in:
Nanne Baars
2017-01-01 21:06:00 +01:00
parent be8f263319
commit dcab7d8abd
6 changed files with 23 additions and 50 deletions

View File

@ -109,8 +109,7 @@ define(['jquery',
this.listenTo(this,'hints:show',this.onShowHints); this.listenTo(this,'hints:show',this.onShowHints);
this.helpControlsView.render(); this.helpControlsView.render();
this.lessonOverviewModel.fetch(); this.lessonOverview.hideLessonOverview();
this.titleView.render(this.lessonInfoModel.get('lessonTitle')); this.titleView.render(this.lessonInfoModel.get('lessonTitle'));
}; };
@ -186,11 +185,10 @@ define(['jquery',
this.showHints = function() { this.showHints = function() {
this.lessonHintView.render(); this.lessonHintView.render();
//this.lessonHintView.
}; };
this.showLessonOverview = function() { this.showLessonOverview = function() {
this.lessonOverview.render(); this.lessonOverviewModel.fetch().then(this.lessonOverview.render());
}; };
this.hideShowAttack = function (options) { // will likely expand this to encompass this.hideShowAttack = function (options) { // will likely expand this to encompass

View File

@ -1,8 +0,0 @@
define([
'backbone'],
function(
Backbone) {
return Backbone.Model.extend({
});
});

View File

@ -0,0 +1,5 @@
<div>
<% _.each(assignments, function(assignment) { %>
<li><strong><a href="#" data-id=<%= assignment.assignment.path %>><%= assignment.assignment.name %></a></strong> (<%= assignment.solved %>)</li>
<% }) %>
</div>

View File

@ -1,24 +0,0 @@
define([
'backbone'],
function(
Backbone) {
return Backbone.View.extend({
tagName: 'li',
template: _.template($('#assignmentTemplate').html() ),
events: {
"click a": "clicked"
},
clicked: function(e){
e.preventDefault();
var id = $(e.currentTarget).data("id");
Backbone.trigger('assignment:navTo',{'assignment': id});
},
render: function() {
this.$el.html(this.template(this.model.toJSON()));
return this;
}
});
});

View File

@ -2,26 +2,35 @@ define(['jquery',
'underscore', 'underscore',
'backbone', 'backbone',
'goatApp/model/LessonOverviewModel', 'goatApp/model/LessonOverviewModel',
'goatApp/view/AssignmentOverview'], 'text!templates/lesson_overview.html'],
function($, function($,
_, _,
Backbone, Backbone,
LessonOverviewModel, LessonOverviewModel,
AssignmentOverview) { LessonOverviewTemplate) {
return Backbone.View.extend({ return Backbone.View.extend({
template: LessonOverviewTemplate,
el:'#lesson-overview', el:'#lesson-overview',
initialize: function (lessonOverviewModel) { initialize: function (lessonOverviewModel) {
this.model = lessonOverviewModel; this.model = lessonOverviewModel;
this.listenTo(this.model, 'change add remove update', this.render); this.listenTo(this.model, 'change add remove update reset', this.render);
this.hideLessonOverview(); this.hideLessonOverview();
}, },
events: {
"click a": "clickedAssignment"
},
clickedAssignment: function(e){
e.preventDefault();
var id = $(e.currentTarget).data("id");
Backbone.trigger('assignment:navTo',{'assignment': id});
},
showAssignments: function() { showAssignments: function() {
this.$el.html(''); this.$el.html('');
this.model.each(function(assignment) { var t = _.template(this.template);
var assignmentView = new AssignmentOverview({ model: assignment }); this.$el.html(t({"assignments" : this.model.toJSON()}));
this.$el.append(assignmentView.render().el);
}, this);
}, },
render: function() { render: function() {

View File

@ -40,13 +40,6 @@
</head> </head>
<body> <body>
<script id="assignmentTemplate" type="text/template">
<![CDATA[
<!-- CDATA is necessary otherwise we get into trouble with the strict HTML5 validation (Thymeleaf) -->
<strong><a href="#" data-id=<%= assignment.path %>><%= assignment.name %></a></strong> (<%= solved %>)
<!-- ]]> -->
</script>
<section id="container"> <section id="container">
<header id="header"> <header id="header">
<!--logo start--> <!--logo start-->