predefined view components to inject in ejs templates

[k1r0s]

some idea..

components: {
        table: function(collection, fields){
            var _table = document.createElement("table");
            var _thead = document.createElement("thead");
            var _tbody = document.createElement("tbody");
            fields.forEach(function(f){
                var _th = document.createElement("th");
                _th.innerHTML = f; 
                _thead.appendChild(_th);
            });
            collection.forEach(function(m){
                var _tr = document.createElement("tr");
                fields.forEach(function(f){
                    var _td = document.createElement("td");
                    _td.innerHTML = m.get(f); 
                    _tr.appendChild(_td);
                });
                _tbody.appendChild(_tr);
            });
            _table.appendChild(_thead);
            _table.appendChild(_tbody);
            return _table.innerHTML;
        }
    }

[k1r0s]

another example..

K.set("testcombo", {
    path: "#tpl-combo",
    requiredProps: ["list"],
    init: function(v, selector){
        var html = "";
        html += "<div class=\"komp-container\">";
        html += "<div class=\"komp-inner-container\">";
        html += "<input class=\"komp-input\"/>";
        html += "<button class=\"komp-search\">Search</button>";
        html += "</div>";
        html += "<div class=\"komp-autocomp\"></div>";
        html += "</div>";

        this.main = this.get("el").querySelector(".komp-input");
        this.autocomp = this.get("el").querySelector(".komp-autocomp");
        this.search = this.get("el").querySelector(".komp-search");

        v.get("el").querySelector(selector).innerHTML = html;
    },
    value: function(){
        return this.currentValue;
    },
    innerEvents: {
        "keydown .komp-input": function(){
            var inputValue = this.main.value;
            var scope = this.get("list").filter(function(m){
                return m.search(inputValue) > -1;
            });
            var htmlAutocomp = "";
            scope.forEach(function(m){
                htmlAutocomp += "<div class=\"option\">" + m.get("name") + "</div>";
            });
            this.autocomp.innerHTML = htmlAutocomp;
        },
        "click .komp-autocomp .option": function(e){
            this.main.value = e.target.innerHTML;
            this.autocomp.innerHTML = "";
        }
    }
});