deep-jquery

deep-jquery

jquery/deepjs related tools for isomorphic dom manipulation.

Using cheerio server side, and jquery browser side.

install

npm install deep-jquery

or

bower install deep-jquery

Setting $ reference

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.

Using $ reference

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(i, e){ /*...*/ })
...

using DOM api

• 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"

Licence

LGPL 3.0