I try to do some exercise in Backbone, but I have problems with rendering of view elements. It would be great to get some idea solving my problem. Any help is welcome!
Here is the modules which I implemented:
(The Basic idea is from here)
Module: keyvalue.js
define(function (require) {
"use strict";
var $ = require('jquery'),
_ = require('underscore'),
Backbone = require('backbone');
// Keyvalue Name Space
window.Keyvalue = {
Models: {},
Collections: {},
Views: {}
};
// Keyvalue Data Model
Keyvalue.Models.Data = Backbone.Model.extend({
defaults: {
key: 'NRW',
value: 'Nordrhein-Westfalen'
},
initialize: function(){
}
});
// Keyvalue Data Collection Class
Keyvalue.Collections.Data = Backbone.Collection.extend({
model: Keyvalue.Models.Data
});
return Keyvalue;
});
Module: keyvalue_list.js
define(function (require) {
"use strict";
var $ = require('jquery'),
_ = require('underscore'),
Backbone = require('backbone'),
Keyvalue_line = require('app/views/Keyvalue_line'),
tpl = require('text!tpl/keyvalue_list.html'),
template = _.template(tpl);
// Keyvalue Name Space
window.Keyvalue = {
Models: {},
Collections: {},
Views: {}
};
// Keyvalues View List
Keyvalue.Views.List = Backbone.View.extend({
tagName: 'ul',
initialize: function() {
this.collection.on('add', this.addOne, this);
},
render: function() {
this.collection.each(this.addOne, this);
return this;
},
addOne: function(keyvalue) {
var keyvalueLine = new Keyvalue_line.Views.Line({ model: keyvalue });
this.$el.append(keyvalueLine.render().el);
}
});
return Keyvalue;
});
Module: keyvalue_line
define(function (require) {
"use strict";
var $ = require('jquery'),
_ = require('underscore'),
Backbone = require('backbone'),
tpl = require('text!tpl/keyvalue_line.html'),
template = _.template(tpl);
// Keyvalue Name Space
window.Keyvalue = {
Models: {},
Collections: {},
Views: {}
};
// Keyvalues View Line
Keyvalue.Views.Line = Backbone.View.extend({
tagName: 'li',
initialize: function(){
this.model.on('change', this.render, this);
this.model.on('destroy', this.remove, this);
},
events: {
'click .edit': 'editKeyvalue',
'click .delete': 'destroyKeyvalue'
},
editKeyvalue: function() {
var newValue = prompt("Please enter the new value", this.model.get('value'));
if(newValue){
this.model.set('value', newValue);
}
},
destroyKeyvalue: function(){
this.model.destroy();
},
remove: function(){
this.$el.remove();
},
render: function() {
//alert(JSON.stringify(this.model.toJSON()));<-- ok
this.$el.html(template(this.model.toJSON()));
return this;
}
});
return Keyvalue;
});
Module where I instantiate: keyvalue.js
define(function (require) {
"use strict";
var $ = require('jquery'),
_ = require('underscore'),
Backbone = require('backbone'),
Keyvalue_list = require('app/views/Keyvalue_list'),
Keyvalue = require('app/models/keyvalue'),
tpl = require('text!tpl/keyvalue_list.html'),
template = _.template(tpl);
return Backbone.View.extend({
initialize: function() {
this.kvArray = [{key: 'BY',value: 'Bayern'},{key: 'RP',value: 'Rheinland-Pfalz'},{key: 'NRW', value: 'Nordrhein-Westfalen'}];
},
render: function () {
this.$el.html(template());
this.keyvalue_table = new Keyvalue.Collections.Data(this.kvArray);
var listView = new Keyvalue_list.Views.List({ collection: this.keyvalue_table });
this.$el.append(listView.render().el);
return this;
}
});
});
Template: keyvalue_line.html
<script id="keyvalue_table" type="text/template">
<strong><%= key %></strong>(<%= value %>)
Template: keyvalue_list.html
<form id="keyvaluelist" action="">
<input type="text" placeholder="Key"/>
<input type="submit" placeholder="Add Key-Value"/>
Where I place the result: index.html
...
<div class="row placeholders">
<div id="keyvaluelist"> KEYVALUE-LIST </div>
</div>
...
