I want you to give me some tips on what I could have done better and is considered "bad practice". The code works, but I think there are better ways to do stuff, so please let me know.
var Artikel = Backbone.Model.extend({
urlRoot: 'api/items.json',
defaults: {
titel: 'Titel niet opgegeven',
url_titel: 'unieke sleutel urltitel',
img_path: 'geen image toegevoegd',
commentaar: 'Commentaar niet opgegeven',
categorie: 'Categorie niet opgegeven',
waardering: 0,
artikel: 'Artikel niet opgegeven'
},
initialize: function() {
if (!this.get('description')) {
var lazy = 'This user was too lazy too add a description';
this.set('description', lazy);
}
}
});
//Mijn collection wordt voorzien van een sorteerfunctie om niet met 'asc' en 'desc' te moeten werken kan ik gebruik maken van 1 en -1
var Artikels = Backbone.Collection.extend({
model: Artikel,
sortAttribute: "categorie",
sortDirection: 1,
sortArtikels: function(attr) {
this.sortAttribute = attr;
this.sort();
},
comparator: function(a, b) {
var a = a.get(this.sortAttribute),
b = b.get(this.sortAttribute);
if (a == b) return 0;
if (this.sortDirection == 1) {
return a > b ? 1 : -1;
} else {
return a < b ? 1 : -1;
}
},
url: 'api/items.json'
});
//Eerste view dat wordt weergegeven en geeft een lijst van al de artikels.
var ArtikelLijst = Backbone.View.extend({
el: '#app',
initialize: function() {
_.bindAll(this, "render");
this.model.bind('change', this.render);
},
render: function(zoekterm) {
this.render;
var that = this;
artikels.fetch({
success: function(artikels) {
if (artikels.sortDirection == -1) {
artikels.sortDirection = 1;
} else {
artikels.sortDirection = -1;
}
artikels.sortArtikels(zoekterm);
var template = _.template($('#artikel-overzicht-template').html(), {
artikels: artikels.models
});
that.$el.html(template);
return this;
}
});
}
});
//Geeft een detail view van de artikels, in de detailweergave wordt de foto bijvoorbeeld weergegeven als extraatje
var ArtikelDetail = Backbone.View.extend({
el: '#app',
render: function(options) {
var that = this;
var artikel = new Artikels();
url = options.id;
artikel.fetch({
success: function(artikel, options) {
var vindartikel = artikel.where({
url_titel: url
});
var artikelcol = Backbone.Collection.extend({
model: Artikels
});
var specifiekArtikel = new artikelcol(vindartikel);
var template = _.template($('#detail-edit-template').html(), {
specifiekArtikel: specifiekArtikel.models
});
that.$el.html(template);
}
});
}
});
// de searchview geeft een formulier en zorgt er voor dat de zoekopdracht url-vriendelijk wordt
var ArtikelSearchView = Backbone.View.extend({
el: '#app',
render: function() {
this.$el.html($("#search-form").html());
if (arguments.length > 0) {
var querystr = arguments[0].replace(/\+/g, "%20");
$("#searchQuery").val(decodeURIComponent(querystr));
}
},
events: {
'submit #searchForm': function(ev) {
$form = $(ev.currentTarget);
document.location = '#/search/' + encodeURIComponent($("#searchQuery", $form).val()).replace(/%20/g, '+');
return false;
}
}
});
//De resultsview laat de gevonden resultaten zien
var ArtikelSearchResultsView = Backbone.View.extend({
el: '#searchResults',
render: function(query_encoded) {
var query = decodeURIComponent(query_encoded.replace(/\+/g, "%20"));
var result_artikels = _.filter(this.model.models, function(artikel_model) {
var artikel = artikel_model.attributes;
artikel.waardering = "string";
for (var key in artikel) {
if (artikel[key].toLowerCase().indexOf(query.toLowerCase()) >= 0) {
return true;
}
}
return false;
});
var template = $("#search-results").html();
var result_html = _.template(template, {
artikels: result_artikels,
query: query
});
this.$el.html(result_html);
}
});
var artikels = new Artikels();
var artikelLijst = new ArtikelLijst({
model: Artikels
});
var artikelDetail = new ArtikelDetail();
var artikelSearchView = {};
artikelSearchView.search = new ArtikelSearchView();
function sorteer(sortterm) {
artikelLijst.render(sortterm);
};
var Router = Backbone.Router.extend({
routes: {
"": "home",
"detail/:id": "detail",
"searchform": "searchform",
"search/:query": "searchResults"
},
home: function() {
artikelLijst.render('titel');
},
detail: function(id) {
artikelDetail.render({
id: id
});
},
searchform: function() {
artikelSearchView.search.render();
},
searchResults: function(query) {
artikelSearchView.search.render(query);
var artikelSearchResultsView = new ArtikelSearchResultsView({
model: artikels
});
artikelSearchResultsView.render(query);
}
});
var router = new Router();
Backbone.history.start();
