0

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;
    },
});
Community
  • 1
  • 1
Marc Radziwill
  • 175
  • 2
  • 12
  • The tag with "dozenten" is not correct. You need to output it (`<%-dozenten%>`). Also try using the escaped print `-` instead of `=`. – David Jan 10 '14 at 13:02
  • @David thanks i fixed this but the Objekt self.model in the router still just has the attributes "bezeichnung", "liste", "modulnummer" and "semester". All other attributes are empty (""). – Marc Radziwill Jan 10 '14 at 13:20

0 Answers0