Nifty Pun Master

    deep-views

    0.2.6 • Public • Published

    deep-views

    Views controller, dom directives and dom-sheets for deepjs

    For jquery dom manipulator, take a look there.

    Simple View :

    var deep = require("deepjs");
    require("deep-views/index");
    require("deep-views/lib/jquery-dom")("dom");
     
    var view = deep.View({
        how: "<b>Hello my friend</b>",
        where: "dom.htmlOf::#content"
    });
     
    view.refresh();

    "What" is injected in "how".

    var view = deep.View({
        what: {
            fullName:"John Rambo"
        },
        how: function (what) {
            return "<b>Hello " + what.fullName + "</b>";
        },
        where: "dom.replace::#content"
    });

    "What" could be loadable.

    var deep = require("deepjs"); // core
    require("deep-views/index"); // views
    require("deep-views/lib/jquery-dom")("dom"); // dom protocol
     
    // browser side template and json client protocol
    require("deep-marked/lib/jq-ajax")("marked"); // server side use : deep-marked/lib/nodejs
    require("deep-jquery/lib/ajax/json")("json"); // server side use : deep-node/lib/rest/file/json
     
    var view = deep.View({
        what: "json::/json/profile.json",
        how: "marked::/templates/my-template.html",
        where: "dom.prependTo::#content"
    });

    "What" could be deeply structured. every loadable string (with a valid protocol in front) will be replaced by its result.

    var view = deep.View({
        what: { 
            datas:"json::/json/profile.json",
            otherDatas:"json::/json/comments.json"
        },
        how: "swig::/templates/simple-template.html",
        where: "dom.appendTo::#content"
    });

    "done" is executed after "where". Use it to bind custom behaviour.

    var view = deep.View({
        what: "json::/json/profile.json",
        how: "swig::/templates/simple-template.html",
        where: "dom.appendTo::#content",
        done: function (renderObject) {
            $(renderObject.placed).find("#fullname-span").click(function () {
                window.alert("You clicked on a name");
            });
        }
    });

    Full description :

    var view = deep.View({
        init:function(){
            // init views (bind event listeners, ...);
            // fired each time that view will be placed in dom. 
            // (if you refresh a view that is already in dom : it is not fired)
        },
        // what datas to render
        what:{ /*...*/ }
        // how to render datas
        how: function(what){
            return something;
        },
        // where to place rendered output (in dom)
        where: function( howOutput ){
            // do as you want.
            return placed_dom_element;
        },
        done: function ( renderedObject ) {
            // "done" handler of whole render sequence
            // do as you want.
        },
        fail: function ( renderedObject ) {
            // manage any error from load/render sequence.
        },
        clean: function(){
            // remove event listeners
            // fired when its removed from dom
        }
    });
    view.refresh();

    A config entry could be added :

    var view = deep.View({
        config:{
            scope:"browser", // or "both" (default), or "server"
            relink:false // relink any anchor tag resent in rendered output to deeplink engine
        },
        how: "swig::/templates/simple-template.html",
        where: "dom.appendTo::#content"
    });

    Directives could be used with views html output. Docs on directives and dom-sheets coming soon.

    Licence

    LGPL 3.0

    Keywords

    none

    Install

    npm i deep-views

    DownloadsWeekly Downloads

    4

    Version

    0.2.6

    License

    none

    Last publish

    Collaborators

    • nomocas