This blog brings two pieces of news:
The jsviews.com website
The first is in the title: There is a now a new jsviews.com website, which provides documentation, samples, downloads, and more, for JsViews, JsRender and JsObservable.
And the second is that the JsRender bits (which have been "beta candidate" for a while) have today moved to being officially labelled "beta".
The context
In fact both JsRender and JsViews have effectively been at beta quality for some time. The plan of course is to move to V1.0 as soon as is appropriate, and in fact the current code is already very close to the targeted V1.0 version, in that the code quality is high, and the feature coverage very complete. So what has been missing? Well the the most important missing piece was full API documentation, and the decision was not to label a library as being an official beta release until that API documentation for that library was available. But to achieve that meant not only writing the documentation content, but also providing the website to view and navigate through that documentation. And also the plan was to provide integrated live working samples completely within the flow of the documentation - and that too needed to be designed and implemented.
So jsviews.com is that website, and it is in fact itself an example of a single-page app built entirely using JsViews and JsRender, illustrating the power of those libraries for creating dynamic interactive single-page apps. If you are interested, you can see the code for the site here. (It actually includes a hidden feature which allows it to switch into editable mode, with wiki-style content creation, so it is more sophisticated than may meet the eye in normal read-only mode).
JsRender now has detailed (and interactive) API documentation
Here it is: jsviews.com/#jsrapi. More topics will be added in the coming period (along with. later on, tutorials, and "deep-dive" topics). But already the topics give complete coverage of the primary scenarios of JsRender.
And JsViews?
JsViews API documentation will be next, and as soon as it is ready, the official beta for JsViews will be declared. (So in fact the JsViews beta version will probably be almost identical to current JsViews bits).
JsRender and JsViews V1.0
Version V1.0 should follow not too long after, since the number of triaged issues currently planned to be addressed for V1.0 is small - and could even be reduced slightly if necessary. V1.1 planned features have also already been largely determined - and V1.1 is not intended to be major release in terms of new features.
Integrated samples within the documentation:
Now, just to give a flavor of the features of the new documentation, here is an example of a sample - taken from the end of this documentation topic:
The sample is live. You can click on Try it and change anything you want: - the template, the data, or the code. For example if you change each of the places I have circled in red -
- and then hit Run Code, you will get something like this:
Now if you switch to the Full Code tab, you can copy the contents of that tab, and drop them into a simple HTML page.
Run the page and you have a fully working sample of your own modified version of the original - which you can continue to experiment with from there...
I am looking forward to completing the documentation, and hope it will help you to discover and appreciated the possibilities of JsRender and JsViews!
Great work. I had been worried this project had become stale. I've been reading through the documentation and something which may be new or passed me by is the following syntax:
ReplyDelete{{for pathOrExpr tmpl=nameOrExpr /}}
When I bind to an element outside of a script template I use the data-bind syntax as it's valid HTML. For example. Say I have the following HTML:
<div id="person">
Name: <span data-link="name"></span>
</div>
With the following code to link the data to the HTML:
var person = {
"name": "Pete",
"addresses": [
{ "city": "London" },
{ "city": "Paris" }
]
};
$('#person').link(true, person);
This works great but now say I wish to display the addresses. I'd like to be able to change my HTML to something like the following:
<div id="person">
Name: <span data-link="name"></span>
Addresses: <ul data-link="for addresses tmpl=addressTemplate" />
</div>
<script id="addressTemplate" type="text/x-jsrender">
<li>{{>city}}</li>
</script>
Any ideas whether/when something like this will be supported in the future?
@Lee Timmins: Yes, good question. That is already supported. I have just created a series of samples which include that specific scenario.
DeleteIn fact you can use any tag you want as part of data-link, including custom tags: data-link="{mytag a b x=yyy tmpl=...}".
For example in this sample you have the syntax: <select data-link="{multisel items=items selected=selectedItems}"></select>
Nice work. This had started off as an offshoot to replace jquery templates. Is that still on the roadmap?
ReplyDelete@Anon: Yes, totally. JsRender is already an official beta, at the same level of quality at least as jQuery Templates, and with a feature-set which is a superset of jQuery Templates.
DeleteSo I recommend moving to JsRender or JsViews, rather than using jQuery templates. Moving forward, I will communicate that message more strongly, but already this is indicated in the ReadMe of JsRender, and elsewhere.
Great work! Keep it up!
ReplyDeleteI'm looking forward to using JsViews on my next projects.
Hi Boris,
ReplyDeleteThanks for the Great work.
I was wondering if JSRender and JSView would ever move to the 1.0 and further.
I think its still in Beta and was wondering if any more updates were on the way.
@Rahul: Yes, absolutely, they will move to 1.0 and beyond. While things have been slower than anticipated, there has been important progress, with more and more documentation topics on www.jsviews.com, and with a continuously improving feature set and quality level. See recent commits on the GitHub projects for JsViews and jsviews.com, to get a sense of that. (Another important update will be coming in a couple of days).
DeleteThe roadmap is to first complete the documentation of JsViews and JsRender at www.jsviews.com, then to declare the official Beta for JsViews, and then to move both JsRender and JsViews to the official V1.0 release.
Boris, Thanks on the great work.
ReplyDeleteI have 2 questions.
I am planning to use JSRender and JSViews for a Chrome Packaged App. Are these libraries CSP compliant?
Second one, do you have an update on v 1.0 release date?
Thanks,
Niranjan
@Niranjan: Sorry not to have answered sooner. I don't believe they are compliant as is, because template compilation uses new Function(). However pre-compilation should be very easy. See jsrender/issues/30 and jsrender/issues/164 . A precompile tool is planned for V1 or V1.1.
DeleteAs to the release date, I have made a lot of progress with some important updates - just released. (I was heads down on that which is why this answer is only coming now). So the bits are almost complete for the V1. However there is still a fair bit of documentation work to be done. The official V1 is probably still 2 or 3 months out.
I am using JsViews for my experimental website, and i have failed to use the "for-else" combination properly (in the context of a data-linked tag).
ReplyDeletecould you please clarify this tiny detail?
Having provided the data linked tag along with all necessary external templates:
<div data-link="{for Players tmpl='#player'}">
how should i add an "else" branch properly?
my wild guess does not work:
<div data-link="{for Players tmpl='#player' else='#noplayer'}">
See ongoing discussion here: github.com/BorisMoore/jsviews/issues/293
DeleteThis will be supported using the syntax data-link="{if expr1 tmpl='#ifTmpl'}{else expr2 tmpl='#else2Tmpl'}{else expr3 tmpl='#else3Tmpl'}{else tmpl='#noneTmpl'}"
i would be grateful if you ping me via e-mail, upon the event of answering.
ReplyDelete"the.silly.sad" at gmail.
thanx in advance.
and yes, jsrender is indeed best of breed