This demo is close functional equivalent of Angular sample. Angular code behind the link and $.my code of the below sample have exactly same size in bytes, but they work in entirely different ways.
The main difference is instantiation op sequence. With $.my entire widget above was rendered and initialized calling $.my only once. No multiple files, no special html syntax, no frameworks, just plugin. And the manifest, which is single solid javascript object.
With Angular you must prepare special html laced with ng-prefixed spices, must externally define bindings and behaviors, prepare templates – also externally – and so on.
jQuery.my manifest structure is much more straightforward. Its just
conventional javascript object – thus more extendable and reusable.
Example above works and behaves as a solid
single control, that returns object as value and raises change event
when value is changed. Moreover editor in example is also $.my instance and
behaves as a single control inside the host form which manages editor visibility,
list and search.
All init ops, including HTML render, are performed with $.my using manifest which is single js object (see API section).
If we make a little trick and transform manifest object – with functions and regexps –
into JSON, and make $.my understand sush kind of JSON... For example we may write something like
{"init":"function ($o,d) {...}"} to pass a function using JSON.
In fact its easy, cause $.my already understands this JSON extension as valid manifest format. Click to show code.
Note $.my also receives object {list:list} object as second param.
It will extend data section of the form manifest.
This approach allows to supply manifest and data for the form
instance separately.
Click to show manifest json, received from server,
slightly formatted for readability.
You may notice functions and regexps are rendered as conventional strings, so it's valid JSON. jQuery.my unwinds such kind of strings back to functions/regexps while parsing manifest. This design is not unique – CouchDB uses same technique of storing runtime-evaluated JSON docs with functions incorporated.
To generate such JSON you can execute $.my.tojson(object) – JSON string
will include functions and regexps of source object. Note it's tricky cause functions's scope certainly
can not be saved. Your functions must be written scope-aware though.
You also can retrieve form's JSON-formatted manifest calling $(form).my("manifest","json").
The JSON code above was generated exactly in this way from the manifest definition below.