Backbone render element

Vote count: 0

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>
...

asked 44 secs ago

Asman

This entry passed through the Full-Text RSS service - if this is your content and you're reading it on someone else's site, please read the FAQ at http://ift.tt/jcXqJW.

Backbone render element