EDIT: i found the issu. The json file posted below was the return of the urlRoot = "../api/modul/:number"
. But due to the fact that I'm creating a ModulCollection
the urlRoot
for one modul is never called. The ModulCollection
gets the json file from url = "../api/module"
. This brings me to my next problem. How can i adjust the urlRoot in the modul model and pass a parameter, so that the server route for one modul is called?
I've tried a little bit so i edited my code below as well.
i have a problem with the json data the server generates. I'm using the Slim PHP Micro Framework. Just the first 3 attributes of the json are rendered and displayed. The server responds correct data and a json for example looks like this:
{ "modulnummer":"7500", "bezeichnung":"2D-Bildanalyse", "semester":"5", "liste":"GI", "voraussetzung":"some text in here", "lernziele":"some text in here", "aufwand":"some text in here", "bewertung":"some text in here", "lehrform":"some text in here", "credits":"some text in here", "bild":"", "literatur":[{ modulnummer":"7500", "literaturid":163, "autor":"Steinm\u00fcller", "titel":"Bildanalyse", "verlag":"Springer", "jahr":"2008", },{ modulnummer":"7500", "literaturid":163, "autor":"otherr", "titel":"title", "verlag":"pub", "jahr":"2008", }], "dozent":[{ "name":"D\u00f6rner", "bid":3, "modulnummer":"7500", "dozentid":3}, { "name":"Schulz", "bid":15, "modulnummer":"7500", "dozentid":15} ]}
The model, collection and view
window.Modul = Backbone.Model.extend({
defaults : {
"modulnummer" : "",
"name" : "",
"bezeichnung" : "",
"liste" : "",
"voraussetzung" : "",
"inhalte" : "",
"lernziele" : "",
"aufwand" : "",
"bewertung" : "",
"lehrform" : "",
"credits" : "",
"bild" : "",
"dozenten" : ""
},
urlRoot : function() {
if (!this.isNew()) {
return "../api/module";
} else {
return "../api/modul/" + modulnummer;
}
},
});
window.ModulCollection = Backbone.Collection.extend({
model : Modul,
url : "../api/module",
});
window.ModulView = Backbone.View.extend({
template : _.template($('#modul-details').html()),
initialize : function() {
var self = this;
},
render : function(eventName) {
$(this.el).html(this.template(this.model.toJSON()));
return this;
},
close : function() {
$(this.el).unbind();
$(this.el).empty();
}
});
and the template looks like this (edit concerning Davids reply)
<script type="text/template" id="modul-details">
<div class="modulDetails">
<div class="block" id="content-inner">
<div class="span_1 col">
<h1><%-bezeichnung%></h1>
<span class="modulnumer"><%-semester%>.Semester</span>
<span class="semester"> </span>
</div>
<div class="span_1 col">
<h2>Inhalte</h2>
<p><%-inhalte %></p>
</div>
<div class="span_1 col">
<h3>Credits: </h3><p><%-credits %></p>
<h3>Dozenten: </h3>
<p>
<%-dozenten%>
</p>
<h3>Voraussetzung: </h3><p><%-voraussetzung %></p>
</div>
</div>
</div>
</script>
In the router i have the following routes:
routes : {
'' : 'home',
'module' : 'module',
'module/:modulnummer' : 'getModul',
"*path" : "notFound"
},
getModul : function(modulnummer) {
console.log("getModul " + modulnummer);
var self = this;
this.modul = new Modul({
'modulnummer' : modulnummer
});
this.modul.fetch({
success : function() {
console.log(self.modul);
if (self.modulView) {
self.modulView.close();
}
self.modulView = new ModulView({
model : self.modul
});
self.changeView(self.modulView);
}
});
},
and i just get some attributes parsed in my model. Only 'semester' and 'bezeichnung' are displayed in the rendered html. I have tried to change the representation of the json file and also the change to model oder view. But I don't have a clue how to get backbone to display all values from the json. I've seen a solution here, where someone was able to display the inner json ("dozent") in my example but this wasn't helpful in order to display just the normal values like "voraussetzung".
Thanks in advance
EDIT 2: GOT IT! This was the answer I've changed the model like this:
window.Modul = Backbone.Model.extend({
initialize : function(options) {
this.modulnummer = options.modulnummer;
},
defaults : {
"modulnummer" : null,
"name" : "",
"bezeichnung" : "",
"liste" : "",
"voraussetzung" : "",
"inhalte" : "",
"semester" : "",
"lernziele" : "",
"aufwand" : "",
"bewertung" : "",
"lehrform" : "",
"credits" : "",
"bild" : "",
"dozenten" : ""
},
url : function() {
var base = '../api/module';
if (!this.isNew())
return base;
return base + (base.charAt(base.length - 1) == '/' ? '' : '/') + this.modulnummer;
},
});