Skip to content

Commit

Permalink
Merge branch 'gulping-feature/fix-readme-markdown'
Browse files Browse the repository at this point in the history
  • Loading branch information
BorisMoore committed Jun 15, 2017
2 parents 9206932 + 644b3f7 commit a6f30b9
Showing 1 changed file with 15 additions and 14 deletions.
29 changes: 15 additions & 14 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,36 +3,37 @@

**JsViews** builds on top of **[JsRender](http://www.jsviews.com/#jsrender)** templates, and adds data-binding and **[observable data](http://www.jsviews.com/#jsobservable)**, to provide a fully-fledged MVVM platform for easily creating interactive data-driven single-page apps and websites.

<h3>Documentation and downloads</h3>

### Documentation and downloads
**[Documentation](http://www.jsviews.com/#jsviews)**, **[downloads](http://www.jsviews.com/#download)**, **[samples](http://www.jsviews.com/#samples)** and **[API docs and tutorials](http://www.jsviews.com/#jsvapi)** are available on the **[www.jsviews.com website](http://www.jsviews.com/#jsviews)**.

The content of this ***ReadMe*** is available also as a *[JsViews Quickstart](http://www.jsviews.com/#jsv-quickstart)*.

<h2>JsViews installation</h2>
## JsViews installation

jsviews.js is available from [downloads](http://www.jsviews.com/#download) on the jsviews.com site.

CDN delivery is available from the ***[cdnjs](https://cdnjs.com)*** CDN at [cdnjs.com/libraries/jsviews](https://cdnjs.com/libraries/jsviews).

Alternatively:

- It can be installed with ***[Bower](http://bower.io/search/?q=jsviews)***, using `$ bower install jsviews`
- It can be installed with **[Bower](http://bower.io/search/?q=jsviews)**, using `$ bower install jsviews`
- It can be loaded using an *AMD script loader*, such as RequireJS
- For installation using *Node.js* (*npm*), and loading using [Browserify](http://browserify.org/) or [webpack](https://webpack.github.io/), see *[JsViews as a Browserify module](http://www.jsviews.com/#node/browserify@jsviews)* and *[JsViews as a webpack module](http://www.jsviews.com/#node/webpack@jsviews)*

(Note that *jsviews.js* includes all of *jsrender.js* code -- so *jsrender.js* does not need to be loaded first.)

<h3>JsRender and JsViews</h3>
### JsRender and JsViews

*JsRender* is used for data-driven rendering of templates to strings, ready for insertion in the DOM. (See *[JsRender Quickstart](http://www.jsviews.com/#jsr-quickstart)* and [JsRender GitHub repository](https://github.com/BorisMoore/jsrender)).

*JsViews* incorporates *JsRender* templates, together with data-binding, *[observable data](http://www.jsviews.com/#jsoapi)* and MVVM support. It provides a powerful platform for building dynamic interactive websites and single-page apps.

(Note: *JsRender* and *JsViews* together provide the next-generation implementation of the official jQuery plugins *[JQuery Templates](https://github.com/BorisMoore/jquery-tmpl)*, and *[JQuery Data Link](https://github.com/BorisMoore/jquery-datalink)* -- and supersede those libraries.)

<h2>JsViews usage</h2>
## JsViews usage

<h3><i>Data-linked templates</i></h3>
### <i>Data-linked templates</i>

JsViews provides *data-linking* - so that JsRender templates become data-bound:

Expand Down Expand Up @@ -66,7 +67,7 @@ HTML elements within 'top-level' page content can also be data-linked -- see [be

[Learn more...](http://www.jsviews.com/#linked-elem-syntax)

<h3><i>Render and link a template</i></h3>
## <i>Render and link a template</i>

With *JsRender*, you call the `render()` method, then insert the resulting HTML in the DOM.

Expand Down Expand Up @@ -160,7 +161,7 @@ This will activate any declarative data-binding (`data-link="..."` expressions)

[Learn more...](http://www.jsviews.com/#toplink)

<h3><i>Making "observable" changes to objects and arrays</i></h3>
### <i>Making "observable" changes to objects and arrays</i>

In current JavaScript implementations, modifying objects or arrays does not raise any event, so there is no way for the change to be detected elsewhere. JsViews dynamic data-bound UI solves this through <em>data-linking</em>, using the <em>JsObservable observer pattern</em>.

Expand All @@ -184,7 +185,7 @@ $.observable(people).insert(newPerson);

[Learn more...](http://www.jsviews.com/#$observable)

<h3><i>Responding to data changes</i></h3>
### <i>Responding to data changes</i>

JsViews uses the *<a href="http://www.jsviews.com/#onpropchange">property change</a>* or *<a href="http://www.jsviews.com/#onarrchange">array change</a>* events to make any <a href="http://www.jsviews.com/#linked-template-syntax">data-linked tags or elements</a> in your templates update automatically in response to each *observable* change in your underlying data. In addition, with two-way data-linking, it ensures that those events are raised when the user interacts with a data-linked template, and causes changes to the underlying data.

Expand All @@ -208,7 +209,7 @@ $.observable(person).observeAll(function(...) {

[Learn more...](http://www.jsviews.com/#observeobjectsarrays)

<h3><i>Accessing the view hierarchy</i></h3>
### <i>Accessing the view hierarchy</i>

Each instance of a rendered template or a template block tag is associated with a JsViews *"view"* object -- so nested tags lead to a hierarchy of view objects. The [view hierarchy](http://www.jsviews.com/#views) shows how the underlying data objects map to the rendered UI.

Expand Down Expand Up @@ -246,7 +247,7 @@ $(".changeBtn").on("click", function() {

[Learn more...](http://www.jsviews.com/#$view)

<h3><i>Data-linked paths</i></h3>
### <i>Data-linked paths</i>

JsViews data-linked templates (and the `$.observe()` API) use the same [paths and expressions](http://www.jsviews.com/#paths) as JsRender templates, but in addition provide *'leaf'* data-binding -- such as:

Expand All @@ -264,7 +265,7 @@ But data-linked paths have additional support, such as linking deeper into paths

[Learn more...](http://www.jsviews.com/#linked-paths)

<h3><i>Computed observables</i></h3>
### <i>Computed observables</i>

JsViews also allows you to data-bind to computed values, such as:

Expand All @@ -275,11 +276,11 @@ JsViews also allows you to data-bind to computed values, such as:

[Learn more...](http://www.jsviews.com/#computed)

<h3><i>Documentation and APIs</i></h3>
### <i>Documentation and APIs</i>

See the [www.jsviews.com](http://www.jsviews.com) site, including the *[JsViews Quickstart](http://www.jsviews.com/#jsv-quickstart)*, [JsViews APIs](http://www.jsviews.com/#jsvapi) and [JsObservable APIs](http://www.jsviews.com/#jsoapi)topics.

<h3><i>Demos</i></h3>
### <i>Demos</i>
Demos and samples can be found at [www.jsviews.com/#samples](http://www.jsviews.com/#samples), and throughout the [API documentation](http://www.jsviews.com/#jsvapi).

(See also the [demos](https://github.com/BorisMoore/jsviews/tree/master/demos) folder of the GitHub repository - available [here](http://borismoore.github.io/jsviews/demos/index.html) as live samples).

0 comments on commit a6f30b9

Please sign in to comment.