deep-jquery

deepjs/jquery related stuffs : clients, protocols, dom...

deep-jquery

jquery/deepjs related tools for isomorphic dom manipulation.

Using cheerio server side, and jquery browser side.

npm install deep-jquery

or

bower install deep-jquery

Before all, you should provides to deep the loaded jquery reference. It allow isomorphic design of your views or dom manipulation.

Example :

var deep = require("deepjs/deep");
require("deep-jquery/index"); // isomorphic manager (provides deep.$ api) 
deep.$($); // here we set $ reference from the global one loaded in page (browser case) 

Server side, if you use autobahnjs you have nothing to do. It automaticaly set $ reference with a cheerio instance associated to the current request.

If you want to use deep-jquery without autobahnjs server side, you should provides your own jsdom or cheerio instance.

When using deep.$("...") after setting current jquery reference (or in autobahnjs html render engine), you should not worried about in which context do you apply your selection. Either it's browser side and you manipulate main browser window. Either it's server side and you manipulate you current request's "window".

In that simple way, you obtain clear and isomorphic code, that could be runned safely without any change browser side or server side.

var deep = require("deepjs/deep");
require("deep-jquery/index"); // isomorphic manager 
deep.$(...); // bind your jquery ref. 
 
 
// somewhere in your code 
deep.$("#content") // return jquery selection handler from current window 
.find("...")
.each(function(ie){ /*...*/ })
...
 
  • dom.htmlOf
  • dom.appendTo
  • dom.prependTo
  • dom.replace
var deep = require("deepjs/deep");
require("deep-jquery/index"); // isomorphic manager 
require("deep-jquery/lib/dom")(); // load dom protocols 
 
deep.$($); // here we set $ reference from the global one loaded in page 
 
var myDomHandler = deep.jquery.DOM.appendTo("#mySelector");
 
myDomHandler("my rendered output"); // will append "my rendered output" to "#mySelector" 
 

You will certainly never use it as this. In place, you will more using it through protocols in conjonction with deep-views.

var deep = require("deepjs/deep");
require("deep-views/index");
require("deep-jquery/index"); // isomorphic manager 
require("deep-jquery/lib/dom")(); // load dom protocols 
 
deep.$($); // here we set $ reference from the global one loaded in page 
 
var view = deep.View({
    how:function(){
        return "my result";
    },
    where:"dom.htmlOf::#content"
});
 
view.refresh();

Will place "my result" in "#content"

LGPL 3.0